微信小程序选项卡功能开发步骤与方法全解析
262
2023-11-07
关于加快微信小程序开发的一些小建议
1.使用 APP.json创建页面
按照我们平常的开发习惯，创建一个新的页面，一般都会先创建文件夹，再创建对应page的形式，创建完成后，app.json中会自动注册该页面。实际上，我们还可以通过直接在app.json中注册页面来生成对应的page。
?
1
2
3
4
"pages": [
"pages/index/index",
"pages/newpage/newpage"
],
如上所示，在配置文件中注册该路径，小程序就会自动创建该对应路径。
2.善用编译模式
我们想要调试某个页面时，相当一部分开发者习惯于直接修改app.json来调整首个入栈页面，实际上完全可以使用编译模式添加编译页面，来代替修改配置文件的行为。
3.组件复用小程序样式
这一点经常被遗忘，因为新建component的时候，小程序并不会展示该配置项。配置options如下，组件可以使用全局样式(app.wxss)
?
1
2
3
4
5
6
7
8
Component({
//继承colorui样式
options: {
addGlobalClass: true,
multipleSlots: true
},
...
}
4.app.js初始化内容函数化
很多小程序onLaunch中写着大量的内容，混乱不堪，后期调试尤为痛苦。可以将不同的初始化内容写为不同的函数，函数化、模块化。
5.善用template
对于内容大量重复的wxml内容，可以将之抽离为template模板文件，使用时直接导入使用即可。
?
1
2
3
4
<import src="template/NexuTemplate.wxml"/>
<view wx:for="{{dirlist}}" wx:key="item">
<template is="dirshow" data="{{item}}"></template>
</view>
6.云开发混合开发
内容安全识别，openid获取，图片鉴黄，支付流程，内容推送这些东西如果使用自己的后台实现，并不是这么简单，但是如果使用了云开发的技术替换这一部分，自己专注于业务逻辑，你会打开一片新天地。
云开发部分功能（后面我会专门写一篇文章介绍云开发混合开发的内容）：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
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 uploadResult.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.将个人配置数据集中到一个文件中
比如说服务器域名、接口令牌这些可能会变化，但经常使用的数据，集中到一个文件中。
?
1
2
3
4
5
6
7
module.exports={
UseCloud:true,
CloudId:, //云开发环境id
TraceUser:true, //记录用户访问日志
AdaptStorge:true, //允许缓存用户数据
SevDomain:http://localhost //服务器的域名
}
8.善用开发者工具的版本管理工具
总结
您可能感兴趣的文章:详解微信小程序开发(项目从零开始)微信小程序云开发之使用云函数微信小程序云开发之数据库操作微信小程序微信支付接入开发实例详解微信小程序开发之入门实例教程篇微信小程序云开发（数据库）详解使用微信小程序开发前端【快速入门】微信小程序云开发详细教程微信小程序开发经验总结（推荐）微信小程序开发入门基础教程
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~