如何制作微信小程序—新建工程与布局分析

边听音乐边阅读吧~~

程序就程序嘛，还“小程序”；电影就电影嘛，还“小电影”！

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

一、注册账号

进入微信公众平台注册账号

选择注册类型

获取开发者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文件中无法使用注释，添加任意注释都会引发报错。