【腾讯游戏人生】微信小程序开发总结
目前【腾讯游戏人生】小程序已经发布上线,大家可以扫小程序码进行体验。接下来主要介绍在开发该款小程序过程中的一些思考和积累。 一、基础普及1.1简介微信小程序是微信公众平台推出除服务号、订阅号、企业号外的第四种微信内应用类型,它是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的仿原生app的交互使用体验和实用功能。 我们可以方便的在微信公众平台进行小程序的注册和提交资料,与微信公众号的注册流程较为一致。对于公司内部的小程序也可以在公司内部平台进行快速注册和审核,地址为http://mmbiz.oa.com/inneraccount?action=index,在此不具体赘述。 1.2配置用户配置:小程序管理平台提供用户管理功能,支持添加1个管理员,根据帐号类型和是否认证分别支持配置不同数目的开发者和体验者帐号权限,这些配置在小程序开发和内测阶段十分有用,即是一个官方的白名单配置功能。 开发配置:与微信公众号其他帐号开发接入配置类似,需要分别设置开发者ID和密钥、服务器域名配置、开发消息接入地址等信息,可参考小程序开发文档逐一设置,对于有开发公众号经验的同学来说也比较快速入手,只是需要注意这里的域名接入都必须要是https的服务域名地址。 二、开发注意2.1页面模型小程序包含一个描述整体程序的 app 和多个描述各自页面的 page组成,可以看做是一系列页面的组合集成,由一个全局app对象调度运行。页面模型是小程序里的一个很重要的概念,从小程序配置文件app.json中也可以看到(如下所示),在app.json中注册的页面地址才可以被调用和打开展示。小程序的展示页面主要分为tabbar页和常规页两种,而只有tabbar页才会有底部tabbar显示,两类页面对应的跳转方式api也不同:
{ "pages": [ "page/xxx/x1", "page/yyy/y1" ]"window"{ "navigationBarTitleText": "test" }"tabBar""list"[{ "pagePath""page/xxx/xxx""iconPath""image/xxx.png""text""tab1" "page/yyy/yyy""image/yyy.png""tab2" ] "networkTimeout""request": 10000"uploadFile"10000 "debug": true } ?对于一个具体的页面模型,都有其内部独立的逻辑和数据作用域。主要包括四个组成文件,且必须要有相同的路径目录和文件名,例如:首页对应/page/index/目录下的index.js、index.wxml、index.wxss、index.json文件。 页面的初始化、渲染、交互等逻辑都可以通过页面js进行事件监听和函数调用进行响应和处理,类似做web前端开发一样,只是需要特别注意该js开发与web前端js开发的部分不同之处:
2.2生命周期小程序的运行和各页面的展示都有其特定的生命周期,并通过一系列的声明周期函数进行调度控制。例如app全局实例的onLaunch、onShow、onHide等监听函数来响应小程序初始化和显影时的控制逻辑。而对于page页面则拥有更为丰富的监听调控函数,实现页面生命周期中更多情况的控制处理。 下图说明了小程序page页面实例的生命周期运作: 而针对小程序内部的多个页面之间的切换展示管理,则由小程序框架路由和页面栈控制托管,并通过路由标签或导航方式api函数进行页面切换。需要注意的是页面初始化第一次onLoad后如果只是onHide在后台不展示而并未onUnload销毁,下次再切回该页面展示时,不会再触发onLoad监听,而是触发onShow监听;onShow在页面的初始化或每次展示时都会触发,因此这里有个小技巧,部分需要实时更新展示到页面的数据可在onShow中进行获取处理。 三、数据处理3.1数据请求小程序里的网络请求主要由wx.request(OBJECT)、wx.uploadFile(OBJECT)等api访问小程序配置的https域名url接口实现。前者类似于ajax请求,后者通常用来上传图片文件等。这里请求API有些坑需要注意:
小程序里的数据请求操作最好都需要进行登录态安全校验,我们在这里仿造之前做H5项目的微信授权校验方式,把调用微信登录和授权后获得的openid等数据进行加密获取一个ticket票据,并设有过期时间,小程序的每个数据请求则需要附加携带openid和该ticket参数在后台php里进行校验,成功则正常进行后续请求和返回数据,失败则告知小程序客户端重新登录和授权后再请求数据。校验的核心算法也较为简单,就是判断在ticket有效期时间内是否满足如下等式:
而登录和授权后初始的ticket生成也即用的该算法左式生成,并返回小程序本地缓存记录,下次请求可从缓存取出直接应用。 最后对小程序里的所有数据请求进行了处理,封装了GET/POST请求的header设置、登录态参数的附加和过期处理、请求loading效果的显隐控制等逻辑,并设置在app全局对象的暴露方法httpRequest中,方便在各子页面调用处理。 由于我们的小程序需要根据用户身份展现不同状态的tabbar首页,因此需要把用户身份信息的请求前置,这里设计了一个loading过渡页面,且刚好在这个页面进行了微信登录和授权,并得到登录态参数初始化,然后请求了用户的身份后设置到app全局数据,并在tabbar首页进行对应判断和展示。 3.2页面通信我们的小程序里有需要商家注册和创建擂台的功能页面,需要填写的信息和层级较多,不足以一屏展示和填写,因此需要支持数据在跨页面间的传递和调用的通信能力,且对数据进行完整、有效和安全的管理,并实时响应页面更新展示。基于小程序本身提供的api和特点,也查阅了一些资料,主要得到如下几种思路和方法: 我们考虑到表单数据较多,且产品需求表单需要本地草稿的功能,下次再打开可显示上次填写数据,无需重新再次填写,因此最终结合了缓存和页面路由栈的功能进行实现。在表单主页面A利用localStorage缓存托管表单全体数据formData,并在子页面B用页面栈getCurrentPages获取和操作主页面A的表单某块子数据formData.subData,子页面B的修改操作通过A.setData实时传递和通知主页面A的刷新展示,主页面A在onUnload中响应对localstoreage的修改保存,便于下次加载读取。 四、代码维护4.1公用配置小程序代码中涉及的较多数据、参数、接口、文案等自定义信息,可做成统一本地化配置,放入app实例的全局数据中公用,便于各子页面获取处理,同时结合小程序loading初始化时进行远程请求更新配置。这样的好处是,可以兼容配置信息更新与否情况下的配置统一管理。当需要配置更新时,能从远程拉取替换,而不需要修改小程序的代码文件,重新再走代码发布及等待审核的流程。 4.2传图组件小程序中注册商家资料和创建擂台时都涉及到了图片的上传处理,用到了小程序官方的传图样式组件和API,同时需要调用统一的后台上传图片生成URL的接口。因此这里有必要可以进行组件模块化封装的代码优化,便于在多个page页面内引入调用。
<template name="picloader"> <view class"weui-cells weui-cells_after-title"> "weui-cell"> "weui-cell__bd"> "weui-uploader"> "weui-uploader__hd"> "weui-uploader__title">{{title}</view"weui-uploader__bd""weui-uploader__files"> <block wx:if"{{picture}}"> "weui-uploader__file" bindtap"previewImage" data-obj"{{name}}"> <image "weui-uploader__img" src"{{picture}}" mode"aspectFill" //block<input id"{{name}}" name"{{name}}" hidden"{{true}}" value"weui-uploader__input-box""weui-uploader__input" bindtap"chooseImage" data>"weui-cell__ft"<icon type"{{validate}}"> /template>
const app = getApp(); function init(pageDelegate) { //1.初始化图片上传种子HASH值 app.httpRequest{ url:app.UtilsgetRequestUrl("getUploadHash": function( res { if(res.r== "0"{ pageDelegatesetData{ _hash:res._hash ; } false; //2.绑定选择图片事件 pageDelegate.chooseImage = function (e{ var that 赞赏
刚表态过的朋友 (2 人)
浅析微信小程序 App() 和 Page() 函数的内部实现
微信小程序-封装请求(GET、POST)
原作者: 一时两无
来自: 腾讯云
1 条回复
推荐教程最新Demo(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |