?博文作者 wangzirui32
💖 喜欢的可以 点赞 收藏 关注哦~~
👏 我的第153篇原创作品
👉本文首发于CSDN，未经许可禁止转载
😎 hello，大家好，我是wangzirui32，今天我们继续来学习微信小程序，开始学习吧！
目录
1. 项目结构
创建learn项目：
一个初始项目的结构如下：
下面我们来介绍项目文件的具体含义。
1.1 项目全局文件
项目全局文件很多，这里介绍几个：
| 文件名 | 说明 |
|---|---|
app.js | 全局页面逻辑处理JS代码文件 |
app.json | 应用全局配置JSON文件 |
app.wxss | 全局样式代码，类似CSS |
project.config.json | 项目的全局配置JSON文件 |
project.private.config.json | 项目的私有配置文件，不常用 |
sitemap.json | 配置小程序及其页面是否允许被微信索引，不常用 |
1.2 pages
pages用来存储微信小程序的页面，以index页面文件夹为例，文件说明如下：
| 文件名 | 说明 |
|---|---|
index.js | index页面逻辑处理JS代码文件 |
index.json | index页面的配置JSON文件 |
index.wxml | index页面代码，使用微信标记语言（WXML） |
index.wxss | index页面样式编写，类似CSS |
2. 创建页面
鼠标右击pages文件夹，选择“新建文件夹”，命名为test，依次创建JS文件，WXML文件，JSON文件，WXSS文件，最终目录结构如下：
3. 小技巧：预览单个页面效果
为了预览效果，我们必须对编译模式进行更改，请点击下拉按钮（小三角形）：
选择“新增编译模式”，输入页面路径（如pages/test/test）：
然后，再次选择我们刚才自定义的编译模式，如下：
再点击编译，查看效果即可。
4. Page对象
打开test.js，创建Page对象，Page对象用来注册这个页面，代码：
// test页面js代码
Page({})
在{}中，你可以指定页面的属性，函数等。常用的如下：
| 函数/属性名 | 说明 |
|---|---|
| data | 页面的初始数据 |
| onLoad | 监听页面加载（生命周期函数） |
| onReady | 监听页面渲染完成（生命周期函数） |
| onShow | 监听页面显示（生命周期函数） |
| onHide | 监听页面隐藏（生命周期函数） |
| onUnload | 监听页面卸载（生命周期函数） |
| onPageScroll | 监听页面滚动（生命周期函数） |
| onReachBottom | 页面触底处理函数 |
| onPullDownRefresh | 监听用户下拉的函数 |
示例代码如下：
// test页面js代码
Page({
data: {
"msg": "测试数据"
},
onLoad: function(){
// 页面加载时
},
onShow: function(){
// 页面显示时
},
onHide: function(){
// 页面隐藏时
}
})
5. WXML页面渲染语法
5.1 页面插值
如上的JS代码，我们定义了data属性，其内容为{"msg": "测试数据"}，如何让它在页面上显示呢？test.wxml代码：
<view class="container">
<text>后台消息：{{ msg }}</text>
</view>
我们使用双花括号插值，和Python中Jinja2模板的插值语法差不多。
效果如下：
5.2 列表渲染
// test.js
Page({
data: {
"names": ['John', 'Jack', 'Sally']
},
})
<!-- test.wxml -->
<view class="container">
<text>后台消息：</text>
<view wx:for="{{ names }}">{{item}}</view>
</view>
这里使用了for循环渲染，遍历列表时，以item存储正在遍历的单个项，效果如下：
5.3 条件渲染
// test.js
Page({
data: {
"name": 'Sally'
},
})
<!-- test.wxml -->
<view class="container">
<text>后台消息：</text>
<!-- 名字是否为'Sally' -->
<view wx:if="{{ name == 'Sally' }}">Hello Sally !</view>
<!-- 名字是否为'John' -->
<view wx:elif="{{ name == 'John' }}">Hello John !</view>
<view wx:else>Who are you?</view>
</view>
更改data中的name，或许会有不同的效果呢！
5.4 模板
// test.js
Page({
data: {
"me": {"name": "John", "age": 13},
"you": {"name": "Sally", "age": 16}
},
})
<!-- test.wxml -->
<template name="render-name">
<view>
名字: {{ name }} 年龄: {{ age }}
</view>
</template>
<view class="container">
<text>后台消息：</text>
<template is="render-name" data="{{ ...me }}" />
<template is="render-name" data="{{ ...you }}" />
</view>
效果：
🎉🎉🎉 好了，今天的课程就到这里，我是wangzirui32，喜欢的可以点个收藏和关注，我们下次再见！
