如何制作微信小程序—新建工程与布局分析
边听音乐边阅读吧~~
程序就程序嘛，还“小程序”；电影就电影嘛，还“小电影”！
小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
一、注册账号
进入微信公众平台注册账号
选择注册类型
获取开发者ID
二、安装开发工具
官网下载
工具界面如下
新建一个小程序，ID填获取的开发者ID或测试号
项目名称：项目的名字
目录：项目存放目录
AppID：开发者ID，这里使用测试号
开发模式：选择小程序
后端服务：暂时不会用到，选择不使用云服务
语言：选择JavaScript，或typescript
三、界面分析
模拟器：左侧，实时预览区域
编辑器：右上侧，开发写代码的地方
调试器：右下侧，调试区域
预览：右侧，可以通过微信扫码在手机端真实预览项目
真机调试：右侧，在手机上调试项目
版本管理：直接提供了初始化git仓库等功能，便于多人维护
其他：机型模型，网络模拟等选项
四、文件分析
.wxml：微信模板文件，类似网页开发的html文件。
.wxss：微信样式表文件，用于定于页面样式。
.js：脚本文件，代码逻辑写在这。
.json：静态数据配置文件。
app.json---小程序全局配置文件
包括小程序页面路径，界面表现(标题，背景色，字体色)，网络超时时间，底部tab等；
pages字段用于描述小程序所有页面路径，注意，如果你删除了此字段中的某条路径，你得同步删除掉对应的页面文件夹。反之，增加页面也是如此。
windows字段用于定于所有页面的顶部背景颜色，文字颜色，标题等，这是一个全局的配置，修改了所有页面都会生效。当然，我们可以在单个页面json配置中定义独特的风格用于覆盖全局配置，比如让每个页面的头部颜色都不一样。
此文件用于定义开发者工具的个性化定制，比如界面颜色，编译配置等等。
wxml模板
信小程序对前端开发中对页面布局使用的更多是div p span这样的标签进行了封装，虽然不能使用那些熟悉的标签，但微信小程序提供了更为方便的例如view，text等标签。
除了标签变化，wxml还新增了例如wx:if类似的属性，微信小程序也推行了MVVM做法，我们只用关心数据层，当数据发生变化，通过数据绑定的做法，模板中的表达式以及wx：等属性来帮你实现视图变化。
wxss样式
小程序中的样式表写法与网页开发类似，可以看到全局配置中和每个页面文件夹下都存在一个wxss文件，这点与json配置一样。我们可以在app.wxss中定义全局样式，而在页面下的wxss样式中定义此页面独有的页面。
五、部分注意点
1.微信小程序与网页开发的区别
网页开发中我们常常通过mpn引入三方库，但jscore环境与nodejs不太相同，因此在网页开发中npm的包一部分在微信可能无法使用。
2.关于添加页面
pages文件夹下文的页面数量一定得与json中的pages字段数组对应，新增页面推荐做法是直接在pages数组中新增一条页面路径，保存后pages文件夹会自动生成一个新的页面，这样做更加方便和保险。
可以看到新增一条路径，保存后自动新增了文件夹，非常方便。但我们删除pages字段中的某条路径时，文件夹不会自动删除，所以记住手动删除对应文件，保证两者是对应关系。
3.注意json文件写法
1.json文件都是被包裹在{}中，并以key-value方式展示。注意，key一定要加上双引号，没加双引号，或者加了单引号都会报错。
2.其次，json的值只能是数字，字符串(需要加双引号)，布尔值，数组(放在[]中)，对象(放在{}中)，或者null，不支持undefined以及其它数据结构，否则会报错。
3.json文件中无法使用注释，添加任意注释都会引发报错。
- 发表于:
- 原文链接：https://kuaibao.qq.com/s/20200312A0EI2400?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
