小程序开发说明文档
一、 目录结构:
-
pages目录 (小程序页面的集合)
-
index 目录(index页面)
-
index.js (页面的私有程序)
存在一个Page对象, 其指定页面的初始数据、生命周期回调、事件处理函数等
参数示例:
data: 页面的初始数据
onLoad: 监听页面加载
onShow: 监听页面显示
onReady: 监听页面初次渲染完成
onHide: 监听页面隐藏
onUnload: 监听页面卸载
onPullDownRefresh: 监听用户下拉动作
onReachBottom: 页面上拉触底事件的处理函数
onShareAppMessage: 用户点击右上角转发 -
index.json (页面的私有配置)
权重高于全局配置,在页面有特殊需求时,可以覆盖全局配置
基本参数与全局配置相同(部分特殊的全局参数除外) -
index.wxml (页面的dom结构)
WXML（WeiXin Markup Language）是框架设计的一套标签语言
- 基本标签:
view与div等价,都是无意义的盒子容器,但在浏览器中还是会以dv渲染
- 数据绑定:
> 小程序的基本语法与vue相似,数据绑定也是类似- 通过
{{ }}来定义,会直接绑定page对象中,data里面的值.也可以叫做文本插值 - 在属性中,即便是
''或""内的{{ }},也是可以进行数据绑定的. - 小程序定义了关键字
true和false,可以在{{ }}内直接使用该布尔值 - 可以在
{{ }}中进行运算,包括:三元运算算术运算逻辑判断字符串运算操作数组操作对象等
示例代码:
// .wxml <view> {{message}} </view> <view id="item-{{id}}"> </view> <checkbox checked="{{false}}"> </checkbox> <view hidden="{{flag ? true : false}}"> Hidden </view> // .js Page({ data: { message: 'Hello MINA!', id: 0 } })-
列表渲染:
在组件上使用
wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。示例代码:
// .wxml 文件 // block是一个无意义的盒子,可以承载wx:for等指令,区别于view,该标签不会在页面中显示 <block wx:for="{{array}}"> // index是小程序返回的当前循环的索引值, item为当前值 <view>{{index}}: {{item.message}}</view> </block> // .js 文件 Page({ data: { array: [ {message: 'foo'}, {message: 'bar'} ] } }) //------------------------------------------------ // .wxml 文件 // wx:for 也可以嵌套，下边是一个九九乘法表: // 循环嵌套会导致 item名 或 index名 的重复,可以手动修改: wx:for-item wx:for-index <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"> <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"> <view wx:if="{{i <= j}}"> {{i}} * {{j}} = {{i * j}} </view> </view> </view> -
条件渲染:
-
wx:if(新增或删除)
wx:if来判断是否需要渲染该代码块,具体表现为新增和删除dom结构示例代码:
<view wx:if="{{true}}}"> True </view> // wx:if 有额外的 wx:else,和 js里的 if elseif else 一样 <view wx:if="{{length == 1}}"> 1 </view> <view wx:elif="{{length == 2}}"> 2 </view> <view wx:else> 3 </view> -
hidden(显示或隐藏)
hidden来判断是否需要显示该代码块,具体表现为显示或隐藏dom结构示例代码:
<view hidden="{{false}}}"> False </view>
-
-
模板(template):
WXML提供模板功能，可以在模板中定义代码片段，然后在不同的地方调用。
模板拥有自己的作用域，只能使用data传入的数据以及模板定义文件中定义的 <wxs /> 模块。示例代码:
// 定义模板 // 使用 name 属性，作为模板的名字,然后在<template/>内定义代码片段 // .wxml <template name="msgItem"> <view> <text> {{index}}: {{msg}} </text> <text> Time: {{time}} </text> </view> </template> // 使用模板 // 使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入 // .wxml <template is="msgItem" data="{{...item}}"/> // .js Page({ data: { item: { index: 0, msg: 'this is a template', time: '2016-09-15' } } }) -
引用文件:
WXML 提供两种文件引用方式
import和include-
import:
import可以将整个文件引入,同时也就可以在该文件中使用被引入文件定义的模板
但是只能使用被引入文件的模板,如果被引入文件也同时引入了其他文件及模板,该文件不可以使用示例代码:
<import src="item.wxml"/> <template is="item" data="{{text: 'forbar'}}"/> -
include:
include可以将被引入文件的dom直接渲染在include标签内,但是不包括 模板和样式示例代码:
// header.wxml <view> header </view> // footer.wxml <view> footer </view> // index.html <include src="header.wxml"/> <view> body </view> <include src="footer.wxml"/> // 渲染后 <view> header </view> <view> body </view> <view> footer </view>
-
- 通过
-
index.wxss 页面的私有样式表
和css无区别
-
-
-
utils 公共函数目录(相当于公共组件,方法)
-
utils.js 公共函数文件
常用的公共函数封装,例如:
date
-
-
app.js 小程序主体程序(也可以当做启动程序)
- App(注册小程序)
App对象指定小程序的生命周期回调等,必须在app.js中调用，必须调用且只能调用一次。不然会出现无法预期的后果。示例代码
App({ onLaunch (options) { // 生命周期回调——监听小程序初始化 }, onShow (options) { // 生命周期回调——监听小程序启动或切前台 }, onHide () { // 生命周期回调——监听小程序切后台 }, onError (msg) { // 错误监听函数 console.log(msg) } }) -
app.json 小程序主体配置(全局配置,权重低于私有页面配置)
小程序根目录下的
app.json文件用来对微信小程序进行全局配置
app.json中不能有注释,会报错-
配置项:
-
pages
小程序页面的集合数组,数组的第一项代表小程序的初始页面。
小程序中新增/减少页面, 都需要对 pages 数组进行修改。 -
window
用于设置小程序的状态栏、导航条、标题、窗口背景色。
navigationBarBackgroundColor: 导航栏背景颜色
navigationBarTextStyle: 导航栏标题颜色, 仅支持blackwhite
navigationBarTitleText: 导航栏标题文字内容
navigationStyle: 导航栏样式,custom为自定义样式
backgroundColor: 窗口的背景色
backgroundTextStyle: 下拉 loading 的样式，仅支持darklight:
onReachBottomDistance: 页面上拉触底事件触发时距页面底部距离，单位为px
-
tabBar
配置项指定 tab 栏的表现, 以及 tab 切换时显示的对应页面
color: 按钮上的文字默认颜色, 仅支持十六进制颜色
selectedColor: 按钮上的文字选中时的颜色, 仅支持十六进制颜色
backgroundColor: 按钮的背景色，仅支持十六进制颜色
borderStyle: 按钮边框的颜色, 仅支持blackwhite
-
list (tab的列表)
接受一个数组，只能配置最少 2 个、最多 5 个 tab, 每个项都是一个对象
pagePath: 页面路径, 必须在pages中先定义
text: 按钮内容
iconPath: 图片路径,icon大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。
selectedIconPath: 选中时的图片路径
position:tabBar的位置, 仅支持 bottom / top
position: 为top时,tab的icon不显示
custom: 自定义tabBar
-
-
networkTimeout
各类网络请求的超时时间,单位均为毫秒。
- plugins
> 声明小程序需要使用的插件。 -
navigateToMiniProgramAppIdList:
当小程序需要使用 wx.navigateToMiniProgram 接口跳转到其他小程序时
需要先在配置文件中声明需要跳转的小程序 appId 列表，最多允许填写 10 个。 -
usingComponents:
在此处声明的自定义组件视为全局自定义组件，
在小程序内的页面或自定义组件中可以直接使用而无需再声明。 -
PermissionObject:
小程序获取权限时展示的接口用途说明。最长 30 个字符
-
style:
app.json 中配置 "style": "v2"可表明启用新版的组件样式。
-
-
配置项:
-
app.wxss 小程序公共样式表
全局样式表,可以设置全局的初始样式
-
package.json 项目描述文件
项目的相关描述,例如: 项目名称,版本号,作者等
-
project.config.json 项目配置文件(微信开发者工具配置文件)
用来配置小程序及其页面是否允许被微信索引。
二、 数据请求(wx.request)
小程序有自带的请求方法,使用也很简单
示例代码:
// .js
wx.request({
url: 'test.php', //请求地址, 仅为示例，并非真实的接口地址
data: { //请求参数
x: '',
y: ''
},
header: { //请求头
'content-type': 'application/json' // 默认值
},
success (res) {
// 成功回调
console.log(res.data)
},
fail (res) {
// 失败回调
console.log(res.data)
},
complete () {
// 接口调用结束的回调函数(只要请求就会触发,无论请求的结果是成功还是失败)
// todo...
}
})
三、请求封装
-
封装 wx.request 请求
思路:- 在
utils中,新建request.js文件,用于封装wx.request - 封装
request方法,通过传参的方式,改变请求的地址:url方法:method参数:data来满足不同的请求需求 - 对请求的
成功回调:success失败回调:fail进行 Promise 操作 - 抛出封装后的请求,让
api.js调用 - 在
utils中,新建api.js文件,所有的请求都在该文件下执行 - 在
api.js中引入request.js文件
调用request.js抛出的封装方法,传入对应的参数
return出请求,将请求抛出给需求页面 - 在需求页面中引入
api.js文件,以及api.js抛出的方法,进行后续的逻辑处理
示例代码(request.js):
//封装请求: 统一调用request方法,并且将所有api请求放在 api.js 中完成,方便后续接口维护. //第一步: 定义 baseUrl(项目服务器域名) const baseUrl = "http://127.0.0.1:7300/mock/5de5fb2e027f08151b7ad1c8/example" //优化2: 单次请求未完成,避免用户再次请求,此处定义一个 变量 var hasClick = false; //第二步: 抛出 封装的请求,传入基本参数: api(地址), method(请求方式), data(请求参数) export default function request(api, method, data) { //第三步: return Promise 异步对象 //Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。 //所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。 return new Promise((reslove, reject) => { //优化2: 用户第一次操作时,变量为 false,继续进行 if (hasClick) { return } //优化2: 此时将变量改写为 true,如果此时用户再次操作,那么此时变量为 true,上面的操作会终止此次请求 hasClick = true //优化1: 发起请求时,弹出 加载框,在请求完成后关闭 wx.showLoading({ title: '加载中...', mask: true }) //第四步: 调用小程序内置api进行数据请求 wx.request({ //第五步: 传入所需参数 url: baseUrl + '/' + api, method: method || 'GET', header: { 'content-type': 'application/json' // 'token': wx.getStorageSync("token") }, data: data || {}, success: (res) => { //第六步: 成功回调:将现有对象转为 Promise 对象 reslove(res.data, res) }, fail: (msg) => { //第七步: 失败回调:返回一个新的 Promise 实例 reject('请求失败'); }, complete: info => { //优化1: 请求完成后,关闭 加载框 wx.hideLoading(); //优化2: 当请求完成后,将变量还原为 false,使下次可以继续请求 hasClick = false } }) }); } //第八步: 根据请求方式的不同,改变参数 method ,使之对应 ['options', 'get', 'post', 'put', 'head', 'delete', 'trace', 'connect'].forEach((method) => { request[method] = (api, data, opt) => request(api, method, data, opt || {}) });示例代码(api.js):
import request from 'request.js' //获取首页初始化数据 export function getIndexData() { return request.get("index", {}); }示例代码(index.js):
// 引入 api.js 中的 getIndexData, other1, other2 方法 import { getIndexData, other1, other2 } from '../../utils/api.js' // 调用这些方法 getIndexData().then(res => { // 成功回调 console.log(res) }).catch((e) => { // 失败回调 console.log(e) }) - 在
四、公共方法库的完善
公共方法库主要是在根目录下
utils目录中的utils.js文件中完成
- date时间戳处理
// date时间戳处理 开始
const formatTime = date => {
var date = new Date(date)
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n
}
// date时间戳处理 结束
- 表单正则验证
