小程序学习笔记
- 一、微信小程序简介
- 二、微信小程序环境准备
- 三、小程序代码构成
- 四、JSON配置
-
- 4.1 [小程序配置 app.json](https://developers.weixin.qq.com/miniprogram/dev/framework/config.html)
- 4.2[工具配置 project.config.json](https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html)
- 4.3 [页面配置 page.json](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html)
- 4.4 [sitemap 配置-了解即可](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html)
- 五、[模板WXML](https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#WXML-%E6%A8%A1%E6%9D%BF)
- 六、样式 WXSS
- 七、 常见组件
-
- 7.1 [view](https://developers.weixin.qq.com/miniprogram/dev/component/view.html)
- 7.2 [text](https://developers.weixin.qq.com/miniprogram/dev/component/text.html)
- 7.3 [image](https://developers.weixin.qq.com/miniprogram/dev/component/image.html)
- 7.4 [Swiper轮播图](https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html)
- 7.5 [navigator导航栏](https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html)
- 7.6 rich-text
- 7.7 [button](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)
- 7.8 [icon](https://developers.weixin.qq.com/miniprogram/dev/component/icon.html)
- 7.9 [radio](https://developers.weixin.qq.com/miniprogram/dev/component/radio.html)
- 7.10 [checkbox](https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html)
- 八、自定义组件
- 九、小程序生命周期
一、微信小程序简介
1、微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用触手可及"的梦想,用户扫一扫或搜一下即可打开应用。
2、微信小程序,之前叫应用号,2017年正式上线
3、学习微信小程序之前,强烈建议先学习vue.js,学了之后再学超级快
4、微信小程序优点:
- 微信有海量用户,且粘性很高,在微信里开发产品更容易触达用户
- 推广app或公众号的成本太高
- 开发适配成本低
- 容易小规模试错,然后快速迭代
- 跨平台
二、微信小程序环境准备
2.1 申请帐号
- 进入小程序注册页根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号
- 你也可以管理你的小程序的权限,查看数据报表,发布小程序等操作。通过登录小程序后台,可以在菜单 “开发”-“开发设置” 看到小程序的 AppID 了 (记得保密)
2.2 安装开发工具
前往 小程序开发工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装
2.3 编译预览
这里推荐用vs code编辑,小程序开发工具预览
vscode 小程序开发插件
(一)minapp。支持微信小程序标签、属性的智能补全,并且提示中包含文档内容(同时支持原生小程序、mpvue 和 wepy 框架,并提供 snippets)。
(二)wechat-snippet。这个插件主要的功能就是代码辅助,代码片段自动完成,可以作为上个插件的补充。
(三)wxml。这款插件用于将wxml代码进行高亮显示,并且提供代码格式化的功能,可将代码格式化为较易阅读的样式。
(四)vscode weapp api 。js中的api提示
三、小程序代码构成
通过开发者工具快速创建了一个 QuickStart 项目,里面有以下不同类型文件:
- .json 后缀的 JSON 配置文件
- .wxml 后缀的 WXML 模板文件
- .wxss 后缀的 WXSS 样式文件
- .js 后缀的 JS 脚本逻辑文件
四、JSON配置
配置相关的为.json文件,需要注意的是 JSON 文件中无法使用注释,试图添加注释将会引发报错
4.1 小程序配置 app.json
app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下:
{
"pages":[//页面路由,在这里添加路由可以自动生成对应文件
"pages/index/index",
"pages/logs/logs",
"pages/demo01/demo01"
],
"window":{
//定义小程序所有页面的顶部背景颜色,文字颜色定义等
//下拉 loading 的样式,仅支持 dark / light
"backgroundTextStyle":"light",
//导航栏的样式
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
4.2工具配置 project.config.json
个性化配置,例如界面颜色、编译配置等等,避免了当你换另外一台电脑重新安装工具的时候再重新配置。
4.3 页面配置 page.json
表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置,可对每个页面进行单独配置
4.4 sitemap 配置-了解即可
⼩程序根⽬录下的 sitemap.json ⽂件⽤于配置⼩程序及其⻚⾯是否允许被微信索引
五、模板WXML
- 标签名字有点不一样
HTML标签 | div, p, span等 |
---|---|
小程序WXML | view, button, text等 |
-
多了一些 wx:if 这样的属性(界面及状态的控制)以及 { { }} 这样的表达式(数据绑定)
-
MVVM 的开发模式(例如 React, Vue),提倡把渲染和逻辑分离
WXML是框架设计的⼀套标签语⾔,结合基础组件、事件系统,可以构建出⻚⾯的结构
5.1 数据绑定
(一)普通写法
index.wxml
<view> {
{ message }} </view>
index.js
Page({
data: {
message: 'Hello MINA!'
}
})
(二)组件属性
index.wxml
<view id="item-{
{id}}"> </view>
index.js
Page({
data: {
id: 0
}
})
(三)bool类型
不要直接写 checked=“false”,其计算结果是⼀个字符串
<checkbox checked="{
{false}}"> </checkbox>
5.2 运算
(一)三元运算
<view hidden="{
{flag ? true : false}}"> Hidden </view>
(二)if 逻辑判断
<view wx:if="{
{length > 5}}"> </view>
注意:花括号和引号之间如果有空格,将最终被解析成为字符串,切记不要留有空格
5.3 列表渲染
(一)wx:for
- 项的变量名默认为 item wx:for-item 可以指定数组当前元素的变量名
- 下标变量名默认为 index wx:for-index 可以指定数组当前下标的变量名
- wx:key ⽤来提⾼数组渲染的性能
- wx:key 绑定的值 有如下选择:
-
- string 类型,表⽰循环项中的唯⼀属性 如
list:[{
id:0,name:"炒饭"},{
id:1,name:"炒面"}]
wx:key="id"
-
- 保留字 *this ,它的意思是 item 本⾝ ,*this 代表的必须是 唯⼀的字符串和数组。
list:[1,2,3,4,5]
wx:key="*this"
代码:
<view wx:for="{
{array}}" wx:key="id">
{
{index}}: {
{item.message}}
</view>
Page({
data: {
array: [{
id:0,
message: 'foo',
}, {
id:1,
message: 'bar'
}]
}
})
(二)block
渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素
<block wx:for="{
{[1, 2, 3]}}" wx:key="*this" >
<view> {
{index}}: </view>
<view> {
{item}} </view>
</block>
5.4 条件渲染
(一)wx:if
在框架中,使⽤ wx:if="{
{condition}}" 来判断是否需要渲染该代码块:
<view wx:if="{
{false}}">1</view>
<view wx:elif="{
{true}}">2</view>
<view wx:else>3</view>
(二)hidden(类似 wx:if)
<view hidden="{
{condition}}"> True </view>
频繁切换 ⽤ hidden
不常使⽤ ⽤ wx:if
5.5 事件绑定
⼩程序中绑定事件,通过bind关键字来实现。如 bindtap bindinput bindchange 等
代码:
<!-- 1.需要给input标签绑定 input事件
绑定关键字 bindinput
2.如何获取输入框的值
通过事件源对象获取e.detail.value
3.把输入框的值赋值到data中
错误:this.data.num = e.detail.value
正确:
this.setData({
num: e.detail.value
})
4.需要加入一个点击事件
bindtab
无法在小程序中的事件直接传参
通过自定义属性的方式传递参数
事件源中获取自定义属性 -->
<input type="text" bindinput="handleInput"/>
<button bindtab="handleTab" data-operation="{
{1}}">+</button>
<button bindtab="handleTab" data-operation="{
{-1}}">-</button>
<view>{
{num}}