微信小程序入门（一）
1. 开发前准备
1.1 申请账号
- 进入小程序注册页 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。
申请账号
-
查看AppID。
小程序的 AppID 相当于小程序平台的一个身份证，后续会在很多地方要用到 AppID 。
查看AppID
1.2 安装开发工具
前往 开发者工具下载页面 ，根据自己的操作系统下载对应的安装包进行安装，打开小程序开发者工具，用微信扫码登录开发者工具，准备开发你的第一个小程序吧！
1.3 我的第一个小程序
（1）新建项目选择小程序，选择代码存放的硬盘路径
（2）填入刚刚申请到的小程序的 AppID（若无AppID，点击页面中的测试号，系统会随机生成一个AppID）
（3）勾选 "不使用云服务" （PS: 要选择一个空的目录）
（4）点击新建，你就得到了你的第一个小程序了，点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。
image.png
2. 目录简介
我们通过开发者工具快速创建了一个小程序项目。小程序代码中的文件类型大致分为以下四种：
（1）.wxml：微信模板文件，类似网页开发的html文件。
（2）.wxss：微信样式表文件，用于定于页面样式。
（3）.js：脚本文件，代码逻辑写在这。
（4）.json：静态数据配置文件。
image.png
2.1 app.json
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
例如本次项目里边的 app.json 配置内容如下：
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
-
pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。 -
window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
其他配置项细节可以参考文档 小程序的配置 app.json 。
2.2 app.js
app.js文件用来定义小程序的全局数据和函数，控制、监听小程序的全生命周期。
在这里可以见到的全局函数有onlaunch(监听小程序初始化)，onshow(监听小程序显示),onhide(监听小程序隐藏)等。
2.3 app.wxss
app.wxss 是整个小程序的公共样式表。类似网站开发中的common.css
2.4 project.config.json
project.config.json文件用于定义开发者工具的个性化定制，比如界面颜色，编译配置等等。类似于我们平常使用的package.json文件，它保存了你对于开发者工具的相关配置，如果你换电脑了，你可以通过此文件直接还原你最初习惯的开发设置。查看详细开发者工具配置
2.3 pages目录
在pages目录下，由一个文件夹中的四个同名不同类型文件组成。.js是脚本文件，.json是配置文件，.wxss是样式表文件，.wxml是页面结构文件，其中json和wxss文件为非必须（默认会继承app的json和wxss默认设置）。
3. 新建第一个小程序页面
3.1 新建页面
pages文件夹中页面与app.json中的pages字段对应，新增页面推荐做法是直接在pages数组中新增一条页面路径，保存后pages文件夹会自动生成一个新的页面。
新建页面
注意删除pages字段中的某条路径时，文件夹不会自动删除，所以记住手动删除对应文件。
3.3 数据绑定
demo.js
Page({
data: {
movieData: {
url: 'http://bl.7yue.pro/images/movie.8.png',
content: '人生不能像做菜，把所有的料准备好才下锅'
}
},
changeData () {
const changeObj = {
url: 'http://bl.7yue.pro/images/sentence.6.png',
content: '心上无垢，林间有风'
}
this.setData({
movieData: changeObj
})
}
})
在demo.wxml中，小程序使用{{}}表达式来绑定JS文件中定义的变量，而在JS文件的data对象中一般用于定义小程序初始化所需数据，比如例子中的变量movieData有一个初始值。
demo.wxml
<view class="classic-container">
<image class="classic-img" src="{{movieData.url}}" />
<image class="tag" src="../../images/movie@tag.png" />
<text bindtap="changeData" class="content" >{{movieData.content}}</text>
</view>
在demo.wxml中可以通过事件让movieData发生变化，比如在组件text中添加点击事件，我们通过点击事件bindtap绑定了一个changeData方法，通过setData修改变量。
test.gif
3.4 条件逻辑
wx:if
小程序中我们可以使用wx:if来控制模板是否显示
<text wx:if="{{true}}">人生不能像做菜，把所有的料准备好才下锅</text>
hidden
也可以通过hidden属性控制显示
<text hidden="{{false}}">人生不能像做菜，把所有的料准备好才下锅</text>
那么这两个方式有什么区别呢？
因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。
3.5 列表渲染
wx:for
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
<view wx:for="{{array}}">
{{index}}: {{item}}
</view>
Page({
data: {
array: ['one', 'two', 'there', 'four']
},
})
image.png
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName}}
</view>
block wx:for
可以用<block/>标签将重要的组件包裹起来，
<block wx:for="{{array}}">
<view>{{index}}</view>
<view>{{item}}</view>
</block>
wx:key
wx:key有什么作用呢，这里参考官方解释：
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key 的值以两种形式提供
字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字*this代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。
我们分别对应这两种值给出两个例子：
字符串情况，表示item中的一个属性，且属性的值在整个数组中都是独一无二的数组或字符串：
<view wx:for="{{array}}" wx:key="id" > {{item. title}} </view>
Page({
data: {
array: [
{id: 0, title: '炊烟时代'},
{id: 1, title: '壹盏灯'},
{id: 2, title: '费大厨'},
]
}
})
this情况，表示item自身，item应该是独一无二的数值或者字符串：
<view wx:for="{{array}}" wx:key="*this" > {{item}} </view>
Page({
data: {
array: [1, 2, 3, 4]
}
})
3.6 请求数据
wx.request({
url: 'http://bl.7yue.pro/v1/classic/latest',
method: 'GET',
header: {
'content-type': 'application/json',
'appKey': config.appKey
},
success: (res) => {
// startsWith endsWith
let code = res.statusCode.toString()
if(code.startsWith('2')){
params.success(res.data)
}else{
// 服务器处理异常
let error_code = res.data.error_code
this._show_error()
}
},
fail: (err) => {
// api调用失败
this._show_error()
}
})
3.7 封装http
4. 初始小程序组件
4.1 自定义组件
在实际的业务需求中，我们需要将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。
4.1.1 创建自定义组件
组件类似于页面，由 json wxml wxss js 4个文件组成（在空文件夹下右击弹出菜单栏，选择新建Component，输入文件名后会自动生成 json wxml wxss js4个文件）。
image.png
（1）在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，具体细节和注意事项参见 组件模板和样式 。
4.2 小程序组件
小程序的组件使用详见官方文档https://developers.weixin.qq.com/miniprogram/dev/component/
