微信小程序之项目的创建

标签：距离   栅栏   对象   ini   学习java   拉伸   direct   ever   申请   

　　之前就想学习一下微信小程序，只不过前段时间在学习Java中的一些线程的知识，拖了很久也没有实行这个目标，今天终于从网上找了一个完整的视频，来从头学习完整的开发流程，现在逐渐有一种想法，就是自己构建项目，开发项目完成的一整套流程，想弄的特别熟悉，没事的时候，有什么好的想法的时候，可以自己开发一个项目，从今天起，重视项目的构建，独立开发！这次是跟着视频讲解来做一下笔记！

一、构建项目

微信小程序的开发需要借助微信提供的生态，到微信公众平台上去申请账号，得到appId，做一些开发小程序的准备工作，具体网站是：https://mp.weixin.qq.com/

1、新建项目

我用的开发者工具是微信官方提供的开发者工具，下载的是：稳定版 Stable Build (1.02.1904090)，用起来还是挺好用的，哈哈，第一次使用，还是不错的，可能也是因为没有用过其他的吧，进入正题吧！

（1）创建一个空白的项目，也可以是官方提供的有一些基本的文件的项目，这里选择的是把一些文件都删除掉，只剩下pages文件夹以及project.config.json，这个是项目的配置文件，然后从头开始新建文件以及文件夹，需要新建的文件以及文件夹如下：

app.json

注意：这个文件中是需要写一些代码的，不然后面没办法新建page模块，只需要写如下代码：{}大括号，代表的是一个对象，

官方app.json文件配置项详解地址：

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

小程序页面配置详细参数：

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

app.js

注意：这个也是需要写初始代码的，不然没法创建page模块，只需要写如下代码：App()

classic基础模块

注意在微信开发者工具中直接右键 -->新建classic目录-->新建page，然后填写classic名称，即自动创建了四个文件classic.js、classic.json、classic.wxml、classic.wxss，并且在app.json中添加了"pages": ["pages/classic/classic"]这段代码，这个第二个classic代表的是classic.wxml页面文件，这就是在app.json 中注册完成，每新建一个page模块都需要在这个app.json中注册

下面是一个模块中的四个文件：

classic.js

classic.json

classic.wxml

1 <view class="chunk color1"></view>
2 <view class="chunk color2"></view>
3 <view class="chunk color3"></view>

classic.wxss

这里是来写页面的样式的，相当于前端中的css文件

简单的代码示例：

 1 .chunk{
 2   width:100px;
 3   height: 100px;
 4 }
 5 
 6 .color1{
 7   background-color: blue;
 8 }
 9 .color2{
10   background-color: black;
11 }
12 .color3{
13   background-color: yellow;
14 }

2、项目中布局

小程序中的布局是支持flex布局的，虽然我也不知道flex布局是什么鬼，但是应该是和boostrap中的栅栏形式的布局是类似的吧

微信小程序之项目的创建

标签：距离   栅栏   对象   ini   学习java   拉伸   direct   ever   申请   

原文地址：https://www.cnblogs.com/ssh-html/p/11129590.html