用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

关于微信小程序的的总结

yuzeng84 2017-5-28 23:13

微信小程序数据绑定、JS调试数据、数据传输等相关心得。

微信小程序学完了,给大家分享一些自己学小程序的心得,希望能帮到大家。

首先,我谈谈小程序数据绑定的那一块,所有从本地或者远程服务器的API传过来,都必须绑定到data: {}, 绑定格式是一个一个的键值对(value:key),然后在wxml文件中通过{{value}}直接用了,具体来说呢,如果是本地的话,你可以在本项目外建立一个exmaple.js文件,文件里var一个数据数组exmaple,通过module.exports = {value:exmaple},然后把该文件引入到你自己要用这些数据的那个页面,引入方式是在该文件var Data = require('../../exmaple.js'),然后该文件中就可以通过数据绑定this.setData({value:Data.exmaple});然后就可以用value.直接用在wxml文件中用了。如果是API的话,你得先通过小程序的api接口

  1. wx.request{(
  2. url: url,
  3. method: 'GET',
  4. header: {
  5. "Content-Type": "json"
  6. },
  7. success: function (res) {
  8. callBack(res.data);
  9. },
  10. fail: function (error) {
  11. console.log(error)
  12. })}

可以先用控制台JS调试看有没有得到数据,得到的数据全都在res.data中,你需要自己处理一下,处理方法应该都知道吧,数据归类到一个数组后引用或者直接引用,同以上的方法先绑定后再到自己的wxml中使用。

再谈谈小程序中的数据传输的方法,在我做小程序的时候我用到的两种方法(同时也是最常用和最简单的方法),第一种是页面之间的传递方法,给你的catchtap或者bindtap的组件上写data-(后面接你想要定义的数据名字,当然前提是这个数据是你在同目录下的.js文件绑定过的,多个数据也是可以的,只要你多写几个data-),后面再自己的bindtap后者catchtap方法中得到你在页面传入得数据,方法是var data = event.currentTarget.dataset.(你定义的数据名字,但要注意一点,当你定义的是data-Id,这时候你就得写成id,如果你定义的是data-example-id,你就得写成exampleId,我也不懂其中原理,也许是个不成文的规定吧),再用页面跳转接口wx.navigateTo({  url: "yemian/id=" + id})(多个需要用&分开),跳转过去的页面需要用option接收。第二种是就是小程序自带的缓存实现的,如果你想把一个不常用的参数转到自己想用的页面上,不妨你可以试试这种方法,我给大家举个例子,就是我在我的小程序中遇到这样一问题,我想把我每日一文的页面的文章详情页面的字体和背景改成可以变化,同时我又想把用户设置好的字体和颜色读取出来,方便我设置用户默认的字体和颜色,我就想到了利用缓存的优良特性,成功解决了这个问题。

最后我还想谈谈小程序的全局变量的问题,全局变量的数值可以在app.js中globalData: {value:key},当自己需要用到这个value的时候,只要在自己要用到的页面定义app = getApp(),就可以用app.value()就可以用这个变量了,全局变量的样式只要在app.wxss中可以全局定义,个别页面需要设置时,只需要覆盖就行了,全局方法需要定义在“utils/util.js”中配置,定以后通过module.exports = {value:方法名字},后面再你用的时候你只需要引入var util = require('../../utils/util.js'),然后util.方法名字就可以了。

自己的小程序没法给大家看,审核不通过的原因是文娱-资讯不适用于个人用户开发,所以决定一直用体验版了。

鲜花
鲜花 (6)
鸡蛋
鸡蛋 (1)

刚表态过的朋友 (7 人)

分享至 : QQ空间
收藏
原作者: 呼呼呼呼呼65