微信小程序--关于加快小程序开发的几个小建议
2020-12-27 21:45
465 查看
加快小程序开发的几个小建议
1.使用
app.json创建页面
按照我们平常的开发习惯,创建一个新的页面,一般都会先创建文件夹,再创建对应
page的形式,创建完成后,
app.json中会自动注册该页面。实际上,我们还可以通过直接在
app.json中注册页面来生成对应的
page。
"pages": [ "pages/index/index", "pages/newpage/newpage" ],
如上所示,在配置文件中注册该路径,小程序就会自动创建该对应路径。
2.善用编译模式
我们想要调试某个页面时,相当一部分开发者习惯于直接修改
app.json来调整首个入栈页面,实际上完全可以使用编译模式添加编译页面,来代替修改配置文件的行为。
3.组件复用小程序样式
这一点经常被遗忘,因为新建
component的时候,小程序并不会展示该配置项。配置
options如下,组件可以使用全局样式(
app.wxss)
Component({ //继承colorui样式 options: { addGlobalClass: true, multipleSlots: true }, ... }
4.
app.js初始化内容函数化
很多小程序
onLaunch中写着大量的内容,混乱不堪,后期调试尤为痛苦。可以将不同的初始化内容写为不同的函数,函数化、模块化。
onLaunch: function(options) { //此处需要有对进入小程序方式的处理 this.InitCloud(); //初始化云服务 / ESC this.InitCustom(); //初始化custom所需配置信息 this.InitEdu(); //初始化教务系统配置 },
5.善用
template
对于内容大量重复的
wxml内容,可以将之抽离为
template模板文件,使用时直接导入使用即可。
<import src="template/NexuTemplate.wxml"/> <view wx:for="{{dirlist}}" wx:key="item"> <template is="dirshow" data="{{item}}"></template> </view>
6.云开发混合开发
内容安全识别,openid获取,图片鉴黄,支付流程,内容推送这些东西如果使用自己的后台实现,并不是这么简单,但是如果使用了云开发的技术替换这一部分,自己专注于业务逻辑,你会打开一片新天地。
云开发部分功能(后面我会专门写一篇文章介绍云开发混合开发的内容):
const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 云函数入口函数 exports.main = async (event, context) => { // console.log(event) switch (event.action) { case 'getWXACode': { return getWXACode(event) } case 'getOpenData': { return getOpenData(event) } case 'msgSecCheck': { return msgSecCheck(event) } case 'imgSecCheck': { return imgSecCheck(event) } case 'submitPages': { return submitPages(event) } default: { return } } } //获取小程序码 async function getWXACode(event) { console.log(event.url) // 此处将获取永久有效的小程序码,并将其保存在云文件存储中,最后返回云文件 ID 给前端使用 const wxacodeResult = await cloud.openapi.wxacode.get({ path: event.url || 'pages/index/index', }) const fileExtensionMatches = wxacodeResult.contentType.match(/\/([^\/]+)/) const fileExtension = (fileExtensionMatches && fileExtensionMatches[1]) || 'jpg' const uploadResult = await cloud.uploadFile({ // 云文件路径,此处为演示采用一个固定名称 cloudPath: `wxCode/wxCode${Math.random() * 9999999}.${fileExtension}`, // 要上传的文件内容可直接传入图片 Buffer fileContent: wxacodeResult.buffer, }) if (!uploadResult.fileID) { throw new Error(`上传失败,文件为空,存储服务器状态代码为空 ${uploadResult.statusCode}`) } return uplo 56c adResult.fileID } // 获取openid async function getOpenData(event) { // 需 wx-server-sdk >= 0.5.0 const wxContext = cloud.getWXContext() return { event, openid: wxContext.OPENID, appid: wxContext.APPID, unionid: wxContext.UNIONID, } } // 检测文本是否合规 async function msgSecCheck(event) { // 需 wx-server-sdk >= 0.5.0 return cloud.openapi.security.msgSecCheck({ content: event.content, }) } // 检测图片是否合规 async function imgSecCheck(event) { return cloud.openapi.security.imgSecCheck({ media: { contentType: event.contentType, value: Buffer.from(event.value) } }) } // 收录页面 async function submitPages(event) { return cloud.openapi.search.submitPages({ pages: [{ path: event.path, query: event.query }] }) } //获取日期 function getDateTime(sj) { var now = new Date(sj * 1000); var year = now.getFullYear(); var month = now.getMonth() + 1; var date = now.getDate(); var hour = now.getHours(); var minute = now.getMinutes(); // var second = now.getSeconds(); return year + "年" + month + "月" + date + "日"; }
7.将个人配置数据集中到一个文件中
比如说服务器域名、接口令牌这些可能会变化,但经常使用的数据,集中到一个文件中。
< 113e pre>module.exports={ UseCloud:true, CloudId:'', //云开发环境id TraceUser:true, //记录用户访问日志 AdaptStorge:true, //允许缓存用户数据 SevDomain:'http://localhost' //服务器的域名 }
8.善用开发者工具的版本管理工具
相关文章推荐
- 关于微信小程序开发的全局变量
- 关于PHP微信h5棋牌程序开发数据库的备份
- 关于微信小程序·小程序云开发字段搜索
- 关于微信小程序的开发步骤
- 微信小程序开发:关于data-key
- 关于微信小程序云开发,申请退款接口返回“订单不存在”的问题
- 微信小程序开发教程(基础篇)4-关于回调函数,匿名函数,闭包的杂谈
- 关于微信小程序开发wx:key字段标签的理解
- 微信小程序开发关于分享功能中怎么定义同一个页面中不同的按钮触发不同的分享内容,或者右上角的分享和页面中分享
- 加快java开发速度的几个建议
- 我在开发微信小程序中用到的几个不错的库
- 关于微信小程序开发的一些细节
- 微信小程序开发————关于调试接口
- 关于微信程序开发---thinkPHP出现 "无法加载模块:Index"
- 关于微信小程序开发个人总结
- 微信小程序开发—关于配置服务器域名
- 关于微信小程序开发request方法的笔记
- 微信小程序学习笔记1 ——关于微信小程序云开发登录注册功能
- 关于微信小程序,哪些开发文档没有告诉你的
- 关于开通微信商户平台后,设置api开发密钥,以及与小程序进行绑定的详细流程!