/约定/ 让我们轻装上阵
一个功能页(Page)的开发通常需要四大块:配置、代码、布局、样式。
这四大块承载不同的方面,要独立不混杂,又要整体融合。于是有了以下约定:
每一块 --> 独立的文件、相同的文件名、不同的扩展名。
按约定行事,自动融合。
于是,一个小程序的功能页 Page,就这样形成了。
- index.json
- index.js
- index.wxml
- index.wxss
而 app.js,app.json,app.wxss 则作为全局定义。
再继续来看代码部分
它少不了这三大块:数据、生命周期、功能过程。
不需要额外的配置,约定一种结构方式即可。
Page({ data, on阶段, func... })
再来看四大块中的交互
通过约定之后,可谓我中有你,你中有我,wxss 定义的名称,wxml 可以根据需要使用,js 定义的数据,wxml 可以灵活呈现,数据变,呈现自动变。
常用表达
1.点击事件
通过 bindtap 属性指定一个功能函数名称即可。以下示例中,{{ msg }}
绑定代码中定义的数据属性 msg,按钮点击事件,执行代码中的 clickMe 功能函数,它改变了 msg 的值,则页面也会相应的呈现新的值。
<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>
Page({
data: { msg : null },
??clickMe: function() {
????this.setData({ msg: "Hello World" })
??}
})
2.页面跳转
wx.navigateTo({
???url: '../mypage',
})
当存在参数时,如:
/mypage?id=123
可通过 onLoad 里 options 可取得参数,如 options.id
Page({
onLoad: function (options) {
console.log(options.id);
},
3.获取输入值
输入控件 bindinput
指定输入事件,在传递的参数(如参数名为 e)中通过 e.detail.value
可以取到值。
<input?id="ipt"?bindinput='iptInput'></input>
iptInput: function(e){
????this.setData({ iptValue : e.detail.value});
}
4.JSON转换
stringify(object)
: 将 object 对象转换为 JSON 字符串,并返回该字符串。parse(string)
: 将 JSON 字符串转化成对象,并返回该对象。
5.WEB 请求
普通请求
在调试阶段,项目可以设置:开发环境不校验安全域名TLS版本与HTTPS证书。这样可以使用 http 做测试,正式环境要求使用 https。
wx.request({
??url: 'http://.../test.php',
??data: {
?????x: ''
??},
??header: {
??????'content-type': 'application/json' // 默认值
??},
??success: function(res) {
????console.log(res.data)
??}
})
文件上传
wx.uploadFile({
url: 'http://.../upload',
filePath: this.data.fileinfo.path,
name: 'myfile',
formData: {
id: "busiid",
},
success: function (resu) {
console.log(resu);
wx.showToast({
title: '请求成功',
})
},
fail: function(err){
wx.showToast({
title: '错误' + err.errMsg
})
console.log(err);
}
})
6.消息提示
wx.showModal({
??title: '消息',
??content: '您点击了',
??showCancel: false
})
wx.showToast({
title: '错误' + err.errMsg
})
7.引入weui-wxss
两个步骤
7.1下载
https://github.com/Tencent/weui-wxss/blob/master/dist/style/weui.wxss
7.2引用
将weui.wxss 放在与 app.wxss 同一目录下。在app.wxss 中最前边引用即可。
@import 'weui.wxss';
文档:https://github.com/Tencent/weui/wiki
8.其它
当异步方法中要更新数据时,不能直接使用 this.setData
,此时,可以在异步发起代码前加上 let that = this;
,然后使用 that.setData
来操作。
在 app.json 配置 tabBar 可以直接定义底部导航。
{
"tabBar": {
"color": "#ddd",
"selectedColor": "#3cc51f",
"backgroundColor": "#fff",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/profile/profile",
"text": "我的"
}
]
}
}
其它组件、模板,WXS(WeiXin Script)参考官方开发文档。