?博文作者 wangzirui32 💖 喜欢的可以 点赞 收藏 关注哦~~ 👏 我的第153篇原创作品 👉本文首发于CSDN,未经许可禁止转载
😎 hello,大家好,我是wangzirui32,今天我们继续来学习微信小程序,开始学习吧!
1. 项目结构
创建learn 项目: ![创建learn项目](https://img-blog.csdnimg.cn/ae47aaa3448f4b46b9bdd590dd4447bc.png#pic_center)
一个初始项目的结构如下: ![项目结构](https://img-blog.csdnimg.cn/c178bc4e12384805b781aea7cb44d7bf.png#pic_center) 下面我们来介绍项目文件的具体含义。
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文件,最终目录结构如下: ![项目结构](https://img-blog.csdnimg.cn/f267db6b75684d41b8dc7ceb9684ca18.png#pic_center)
3. 小技巧:预览单个页面效果
为了预览效果,我们必须对编译模式进行更改,请点击下拉按钮(小三角形): ![更改1](https://img-blog.csdnimg.cn/dbc093671981492b881ab11f7593a6a7.png#pic_center) 选择“新增编译模式”,输入页面路径(如pages/test/test ): ![更改2](https://img-blog.csdnimg.cn/62648d36f43442aaa1e6e546054ccb90.png#pic_center) 然后,再次选择我们刚才自定义的编译模式,如下: ![选择编译模式](https://img-blog.csdnimg.cn/6bcfac1dc9284abd975745ea431915d5.png#pic_center) 再点击编译,查看效果即可。
4. Page对象
打开test.js ,创建Page 对象,Page 对象用来注册这个页面,代码:
Page({})
在{} 中,你可以指定页面的属性,函数等。常用的如下:
函数/属性名 | 说明 |
---|
data | 页面的初始数据 | onLoad | 监听页面加载(生命周期函数) | onReady | 监听页面渲染完成(生命周期函数) | onShow | 监听页面显示(生命周期函数) | onHide | 监听页面隐藏(生命周期函数) | onUnload | 监听页面卸载(生命周期函数) | onPageScroll | 监听页面滚动(生命周期函数) | onReachBottom | 页面触底处理函数 | onPullDownRefresh | 监听用户下拉的函数 |
示例代码如下:
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模板的插值语法差不多。 效果如下: ![效果](https://img-blog.csdnimg.cn/ea1a79d483804d82a2bd476855b21e70.png#pic_center)
5.2 列表渲染
Page({
data: {
"names": ['John', 'Jack', 'Sally']
},
})
<view class="container">
<text>后台消息:</text>
<view wx:for="{{ names }}">{{item}}</view>
</view>
这里使用了for 循环渲染,遍历列表时,以item 存储正在遍历的单个项,效果如下: ![效果](https://img-blog.csdnimg.cn/ae4ae3343caa4021a82f12b00f80015e.png#pic_center)
5.3 条件渲染
Page({
data: {
"name": 'Sally'
},
})
<view class="container">
<text>后台消息:</text>
<view wx:if="{{ name == 'Sally' }}">Hello Sally !</view>
<view wx:elif="{{ name == 'John' }}">Hello John !</view>
<view wx:else>Who are you?</view>
</view>
更改data 中的name ,或许会有不同的效果呢!
5.4 模板
Page({
data: {
"me": {"name": "John", "age": 13},
"you": {"name": "Sally", "age": 16}
},
})
<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>
效果: ![效果](https://img-blog.csdnimg.cn/81583ca35b884c0cacc2a85b59298abd.png#pic_center)
🎉🎉🎉 好了,今天的课程就到这里,我是wangzirui32,喜欢的可以点个收藏和关注,我们下次再见!
|