# 前言
第一次看微信小程序开发文档,打开微信开发者工具,看着配置文件一脸懵,尝试修改,报错(卒)。
第二次打开微信开发者工具,整理思绪,耐心学习,现在把已知的知识点记录下来(戴着耳机播放音乐屏蔽掉外界声音的干扰真的好很多)。
# 注册账号
# 下载微信开发者工具
下载地址:微信开发者工具
下载最新稳定版,根据你的系统来下载
# 了解目录结构
├── pages ===> 路由文件夹
│ ├── index ===> 路由名称(index)
│ │ ├── index.js ===> js(仅用于 index)
│ │ ├── index.json ===> 页面配置(仅用于 index)
│ │ ├── index.wxml ===> html(仅用于 index)
│ │ └── index.wxss ===> css(仅用于 index)
│ └── logs ===> 同上
│ ├── logs.js
│ ├── logs.json
│ ├── logs.wxml
│ └── logs.wxss
└── utils ===> 工具js
└── util.js
├── app.js ===> 全局公共js
├── app.json ===> 全局公共配置
├── app.wxss ===> 全局公共css
├── project.config.json ===> 项目配置文件
├── sitemap.json ===> 配置小程序及其页面是否允许被微信索引
不要着急去想看懂代码,先了解项目结构
# 疑惑1
这个是微信小程序告诉你,这个页面可以被微信访问,可以选择关闭显示。
# 小程序全局的三个文件
- app.js
- app.json
- app.wxss
# app.js
// app.js
App({
onLaunch (options) {
// 在启动时做一些初始的事情。
},
onShow (options) {
// 页面出现在前台时做点什么。
},
onHide () {
// 页面从前台变为后台时候做点什么。
},
onError (msg) {
console.log(msg)
},
globalData: 'I am global data'
})
整个小程序只有一个 App 实例,是全部页面共享的。开发者可以通过 getApp
方法获取到全局唯一的 App 实例,获取App上的数据或调用开发者注册在 App
上的函数。
// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data
# app.json
{
"pages":[ ===> 路由列表
"pages/index/index", ===> 第一个路由就是进来小程序的第一个页面
"pages/logs/logs" ===> 第二个路由
],
"window":{ ===> 全局的默认窗口表现
"backgroundTextStyle":"light", ===> 下拉 loading 的样式,仅支持 dark / light
"navigationBarBackgroundColor": "#fff", ===> 导航栏背景颜色,如 #000000
"navigationBarTitleText": "Weixin", ===> 导航栏标题文字内容
"navigationBarTextStyle":"black" ===> 导航栏标题颜色,仅支持 black / white
},
"tabBar":{ ===> 底部 tab 栏
"color": "#000000", ===> tab 上的文字默认颜色,仅支持十六进制颜色
"selectedColor": "#e1403a", ===> tab 上的文字选中时的颜色,仅支持十六进制颜色
"backgroundColor": "#ffffff", ===> tab 的背景色,仅支持十六进制颜色
"list": [{ ===> tab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab
"pagePath": "pages/index/index", ===> 页面路径,必须在 pages 中先定义
"text": "首页", ===> tab 上按钮文字
"iconPath": "", ===> 图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。
"selectedIconPath": "" ===> 选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。
}, {
"pagePath": "pages/logs/logs", ===> 同上
"text": "日志",
"iconPath": "",
"selectedIconPath": ""
}]
},
"networkTimeout": { ===> 网络超时时间
"request": 10000, ===> wx.request 的超时时间,单位:毫秒。
"downloadFile": 10000 ===>
},
"style": "v2", ===> 指定升级后的 weui 样式
"sitemapLocation": "sitemap.json" ===> wx.downloadFile 的超时时间,单位:毫秒。
}
# app.wxss
# 小程序页面的四个文件
- js
- json
- wxml
- wxss
# js (页面逻辑)
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// 页面创建时执行
},
onShow: function() {
// 页面出现在前台时执行
},
onReady: function() {
// 页面首次渲染完毕时执行
},
onHide: function() {
// 页面从前台变为后台时执行
},
onUnload: function() {
// 页面销毁时执行
},
onPullDownRefresh: function() {
// 触发下拉刷新时执行
},
onReachBottom: function() {
// 页面触底时执行
},
onShareAppMessage: function () {
// 页面被用户分享时执行
},
onPageScroll: function() {
// 页面滚动时执行
},
onResize: function() {
// 页面尺寸变化时执行
},
onTabItemTap(item) {
// tab 点击时执行
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// 事件响应函数
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this.setData 回调
})
}
})
详细的参数含义和使用请参考 Page 参考文档 。
获取data的值: console.log(this.data.text);
设置data的值: this.setData({ text : ‘dome’ })
调用方法: this.viewTap();
# json
每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置,页面中配置项会覆盖 app.json 的 window 中相同的配置项。
{
"navigationBarBackgroundColor": "#ffffff", ===> 导航栏背景颜色,如 #000000
"navigationBarTextStyle": "black", ===> 导航栏标题颜色,仅支持 black / white
"navigationBarTitleText": "微信接口功能演示", ===> 导航栏标题文字内容
"backgroundColor": "#eeeeee", ===> 窗口的背景色
"backgroundTextStyle": "light" ===> 下拉 loading 的样式,仅支持 dark / light
}
完整配置项说明请参考 小程序页面配置
# wxml
WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合 基础组件、事件系统,可以构建出页面的结构。
数据绑定
<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
data: {
message: 'Hello MINA!'
}
})
列表渲染
<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
使用 wx:for-item 可以指定数组当前元素的变量名,
使用 wx:for-index 可以指定数组当前下标的变量名:
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
条件渲染
<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({
data: {
view: 'MINA'
}
})