小程序-基础表达篇
- 2019 年 10 月 9 日
- 笔记
/约定/ 让我们轻装上阵
一个功能页（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）参考官方开发文档。
