小程序-基础表达篇

/约定/ 让我们轻装上阵

一个功能页（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）参考官方开发文档。

文档链接