微信小程序开发技巧总结(持续更新...)

小程序开发技巧总结

结合自己在平时的开发中遇到的各种问题,和浏览各种问题的解决方案总结出一些自己在日常开发中常用的技巧和知点,希望各位不吝斧正。

数据的生命周期

1.短生命周期数据存储

以小程序启动到彻底关闭为周期的的数据建议存储在app.js文件夹中,引用app.js:

const app =getApp();

假设Value是在小程序本次生命周期中经常使用到的一个数据,比如说请求API的Token,动态的令牌等。那么就可以把这个值赋值到全局变量中去。实际上,并不是只有app.js中的globalData是全局变量,可以自己定义数据集。

App({
  eduOS:{
    token:''
  },
  ...
})

对于app.js里面的token进行赋值操作很简单,只要页面引用了app.js

app.eduOS.token = Value;

这个数据在小程序的本次启动到彻底关闭后台的周期中就是长期存在的了,还可以根据需要进行修改,Value可以是对象。

2.长生命周期或者隐私数据存储

这种数据的显著特点是在小程序关闭再次重启后依然存在,或者涉及到用户的隐私信息但是需要复用,这种时候可以用本地缓存来解决这种问题。

本地缓存的生命周期: 小程序被开始使用 -----> 小程序被彻底从使用列表中移除。

小程序设置缓存的方式:

wx.setStorage({
            key: 'educookie',
            data: {
              xh: that.data.xh,
              pwd: that.data.pwd
            }
          })

小程序获取缓存的方式:

 var that = this;
 wx.getStorage({
      key: 'educookie',
      success: function(res) {
        that.setData({xh:res.data.xh,pwd:res.data.pwd});
      },
    })

比如保存用户的登陆态信息,但是不能保存用户的隐私数据,就可以采用这种方式。

或者是一个非时效性的数据,可以通过这种方式进行存储。

3.动态信息或配置信息存储

保存用户的配置信息,在更换手机时能迅速完成配置同步。

商家小程序推荐商品修改,或者是内容修正,或者是增加活动,不可能每次都要重写然后再次让小程序进行审核。

对此,可以在后端服务器中保存这个信息。

以一个小程序的轮播广告牌为例:

{
 ad1:'imgurl1',
 ad2:'imgurl2',
 ad3:'imgurl3'
}

把这个数据存放在后台服务器,每一次刷新该页面都请求一次后台数据,对内容进行修改。

wx.request({
    url:'XXX',
    data:{},
    success(res){
        that.setData({
            adList:res.data
        })
    }
})

类似这种方式,完成对一些数据的动态控制或者是云同步。

4.页面间数据传递

页面间之间的数据传递一般是简单的,这种类型的数据的生命周期是一次性的,用完即删。

wx.navigatorTo({
    url:'../index/index?param1=value1&param2=value2'
})
//在index页面获取
onLoad(options){
    console.log(options.param1);//value1
}

可以参照Http请求中的Get表单传参方式来写页面之间的传参。

如果需要传送的数据太多,可通过Map<key ,Storge>进行传递

wx.setStorge({
    key:'xxx',
    data:mydata
})

传递参数只需要传递一个key,在其他界面通过这个key再次去除本地缓存,对于这种类型的数据,建议使用完后即时的删除缓存。

wx.removeStorage({
  key: 'xxx',
  success(res) {
    console.log(res)
  }
})

原文地址:https://www.cnblogs.com/masterchd/p/10901624.html

时间: 05-19

微信小程序开发技巧总结(持续更新...)的相关文章

微信小程序开发环境搭建

微信小程序可谓是今天最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会给移动端App带来一个寒冬,身为一个Android开发者我是不相信的,即使有,那也是很遥远的未来. 不管微信小程序是否能颠覆当今的开发格局,我们都要以好奇的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们一起来开始吧. 微信已于9月23号晚发布了最新开发工具,以及官方文档,新版开发工具支持无appid登录开发者工

资讯 | 2018年1月15日微信公开课解读!微信小程序开发资源

引言:2018年1月15日 微信公开课PRO开课了,本次课时内容将涉及:小程序.智慧零售.企业微信.小游戏  (附学习参考资料) 为了快速理解「2018 微信公开课 PRO 版」上张小龙的一小时演讲内容,结合下午微信公开课课室A_B_C的课时安排,这里为大家提前整理了相应的小程序学习参考资料: 微信公开课pro_A课室(14:00-17:50) 主题:小程序产品能力.开发.应用及规则 一.如何开发一个优秀的微信小程序/小游戏 微信小程序官方工具  https://mp.weixin.qq.com

微信小程序开发入门教程

做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先来看看其有哪些官方文档. 微信公众平台开发者文档统一入口为:https://mp.weixin.qq.com/wiki,这里面大部分内容都是以前就有的,微信开发都是基于此份文档. 现在的变化是在这份文档的顶部加了一个“微信公众平台.小程序”的入口,这个入口才就是专门针对微信小程序开发的文档,如下图:

小记一笔 -微信小程序开发随笔

序言: 今年的01月09号备受关注的微信小程序正式上线了, 众多的互联网企业也相继发布了自家的小程序.趁着最近上班不是特别忙,自己闲来无事也跟着捣鼓捣鼓了一个个人记帐用的小程序:小记一笔.用户可以方便.快捷的将自己平时的开销与收入记录下来,还有各种类型的统计,以便实时的准确掌握自己的财务状况.目前此程序已正式上线,大家可以在微信中搜索"小记一笔"点击使用,下面是其中几张效果截图:      准备工作: 1.要开发微信小程序,首先得有工具,可以先去微信公众平台官网(https://mp.

【微信小程序开发?系列文章六】生命周期和路由

这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程序开发•系列文章四]模块化 [微信小程序开发•系列文章五]主界面 [微信小程序开发•系列文章六]生命周期和路由 整个微信小程序从打开到关闭,整个过程可以分为很多阶段或者说状态,这一整段的过程,我们称之为小程序的生命周期.而周期中的每种不同的状态,到另一个状态的过度和转化,是需要一个触发机制的,这种机

微信小程序开发教程,大多数人都搞错的八个问题

小程序目前被炒得沸沸扬扬,无数媒体和企业借机获取阅读流量. 这再次证明一点,微信想让什么火,真的就能让什么火.这种能力真是全中国再也没有人有了,政府也没有. 但四处传的消息很多是失真的,废话不说,先列出8个多数人都搞错的问题: 小程序是HTML5: 小程序是B/S的: 把M站改改就可以接入到小程序里: 小程序体验不佳: 小程序适合低频长尾应用: 小程序是新的Appstore: 小程序做不起来,需求不高: 小程序会做起来,但会和原生应用长期并存. 以上8个是很多人凭直觉得出的结论,但真正深度调研和

微信小程序开发工具测评

1月9日微信小程序正式上线.很多企业都希望能在这个.但是在技术开发的问题上,却不知道该如何下手.经过一些程序员不辞辛苦连夜测试,终于从十余款工具呕心沥血筛选出四款比较靠谱实用的微信小程序开发工具.接下来一起来看看测评吧. 一.微信小程序官方开发工具 注意,它只是个工具,而不是一个IDE.官方工具中的代码编辑功能,就是将vscode的代码编辑功能嵌入到工具中,不足以支撑开发. 优点 因为是官方工具所以有这其它第三方工具有这不可比拟的天然优势,如果不是他代码编辑功能太弱的话. 官方工具,可调试,可预

微信小程序开发工具使用与设计规范(二)

上一篇文章主要分析了微信小程序应用场景和优劣势.本篇你可以学习到: 如何使用小程序开发工具写一个Hello World 微信小程序设计规范 微信小程序项目结构 >>>微信小程序开发工具使用 下载安装小程序 下载 :微信web开发者工具 下载:官方DEMO源码 本系列教程使用的是mac版的开发者工具. 安装完成后,打开微信web开发者工具 1.扫码登录,绑定个人微信 2.扫码登录后,新建或导入已有项目(这里使用官方提供的DEMO源码quickstart) 3.新建项目,导入刚下载的quic

微信小程序开发优秀教程及文章合集第一期

我会不定期的选取一些优质教程,整理成辑,以便大家集中阅读: 新手向!微信小程序开发手记系列:微信小程序开发手记<一>:项目的代码结构微信小程序开发手记<二>:属性display微信小程序开发手记<三>:backgroud和border属性微信小程序开发手记<四>:视图容器微信小程序开发手记<五>:组件微信小程序开发手记<六>:API 艺龙系列:精品!艺龙小程序:开发项目遇到的问题以及解决方案:http://www.wxapp-unio