uniapp开发微信小程序从入门到上手
关于uniapp开发微信小程序的那些事
- 开发工具和配置
-
- HbuildX
- 微信开发者工具
- 开发设置
- 代码上传和发布
- 微信小程序中踩过的坑
- 常用问题和解决方法
- 部分代码片段
- 多增加可配置性选项
- 小程序截图
- 总结
开发工具和配置
我开发时选择的工具时HbuildX和微信开发者工具稳定版,再HbuildX中写前端代码时可随时预览效果,再里面有一些内置模板方便我们快速创建项目进行代码开发，也有uniapp组件和API例子，是可以很快是我们上手的。
IDEA下载链接给上：
1.HbuildX：下载链接
2.微信开发者工具：下载链接
3.框架使用的UniApp,官方文档:文档链接
HbuildX
开发工具都下载好后，我们可以创建uniapp内置模板运行到微信开发者工具中：
在IDEA中 运行=>运行到小程序模拟器=>运行配置中选择安装好的微信开发者工具位置：
运行到微信开发者工具中，还需要再微信开发工具设置=>安全设置=>安全，打开服务端口：
如果不打开运行到微信开发工具会失败。
在HbuildX中可以使用终端安装一些依赖和包，如图表类Echarts、前端插件等。
微信开发者工具
开发设置
前期小程序体验版，我们调用后台接口，可以在微信开发者勾选不检查域名和https证书选项，这样我们在微信公众平台服务器配置后就可以调后台接口成功，主要涉及请求域名、上传地址、下载地址比较关键(开发日常)。
设置之后再开发工具详情中刷新就可以看到了，
代码上传和发布
- 完善小程序基本信息。
- 上传代码提交审核，填写审核的基本信息，审核时注意如果设计到天气查询，需要在服务类目添加对应类目，不然有可能审核不通过。
- 审核通过，发布版本。
我们需要上传代码审核发布的话，如果是个人账号还是公司账号都要填登录微信公众平台中开发中的APPID
微信小程序中踩过的坑
- 调用相机拍照
- 主包、分包问题
- 接口调用问题
- 组件层级问题
- 获取微信用户信息问题
- swiper，固定顶部选项卡，动态设置高度问题，同步渲染
- 小程序上传多张图片
- 小程序人脸识别
解答:
1、通过uniapp api调用相机进行拍照弹出的是手机自带的相机，而微信小程序上使用的相机拍照是微信自己的camear原生组件，所以是不一样的，再App中拍照获取到的是一个图片的网络地址，可直接使用，小程序中则是临时路径，需要将图上传到服务器，所以上传图片的话需要调用上传的接口，且小程序没有同时上传多个文件的接口，所以多个文件上传需要循环调用上传接口。
2、小程序项目结构上默认主包代码大小限制2M，如果超过大小我们就应该进行代码压缩和分包,注意页面引入文件的大小，样式和js切互重复引用。
3、微信小程序调用后台接口到上线时必须时https形式的，即服务器需要部署SSL证书,前期调试可以再开发者工具中勾选不检验域名和https证书进行开发。
4、微信原生组件的层级最高，开发时遇到弹框未能覆盖textarea的问题，浏览资料发现是层级问题，给出的解决办法是通过v-if属性进行控制，或通过cover-view标签，但可嵌套的组件有限制,我是通过v-if来实现的，体验感稍微没那么一点点好。
5、微信获取用户信息，需要用户授权，以前可以通过调用接口弹出用户授权，可自2018年6月微信取消了这种方式，说是涉及到安全问题，这一做法显然使很多人不满意，只能用户自己点击授权控件来弹出授权框。
6、这个顶部的问题折腾了有一段时间，发生原因是实际和需求的变更，有很多时候我们需要再封装好的组件上再去改动，这个也不意外。每个swiper需要动态加载后台接口数据，如果我们设置高长度，第一还是无法掌控高度，第二用户体验问题，用户会拉出很多空白，所以需要再加载完数据后再动态设置高度，切记加载完，所以这里需要js同步来实现。
7、小程序上传多张图片是循环调单上传接口
8、当时我们研究小程序的人脸识别采用了3中方案
- 通过腾讯云人脸识别，调用他们的API，缺点是要钱(百度或其他也一样)
- 通过python写的，但只做到了照片对比，没继续往下深入活体根据动作，比如眨眼睛识别，这样只通过照片对比存在很大的安全问题
- 通过粤信签小程序人脸识别，这个就是跳转到它的人脸验证界面，其中信息获取接口需要报备，我们最终采用这种，优点是免费
常用问题和解决方法
- 微信小程序上传图片最多9张
- 接口安全问题：防止别人恶意攻击，重要信息放在后台处理
- 加载数据显示undifined
- 页面传值
- 返回页面刷新：调用上一页的onload方法进行刷新
- 获取地理位值和天气
- 小程序更新问题：每次启动小程序检查版本更新
- 上传图片组件，再右上角加删除图标：原上传组件是没有删除图标的
- 每个列表加radio单选选择
部分代码片段
小程序更新代码片段，写在app.vue的onlaunch小程序启动周期中：
//小程序启动检查版本是否有更新
const updateManager = uni.getUpdateManager();
updateManager.onCheckForUpdate(function(res) {
// 请求完新版本信息的回调
console.log(res.hasUpdate);
});
updateManager.onUpdateReady(function(res) {
uni.showModal({
title: '更新提示',
content: '新版本已经准备好，是否重启应用？',
success(res) {
if (res.confirm) {
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate();
}
}
});
});
updateManager.onUpdateFailed(function(res) {
// 新的版本下载失败
uni.showModal({
title: '更新失败',
content: '新版本更新失败，是否重新更新？',
success(res) {
if (res.confirm) {
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate();
}
}
});
});
在当前页操作返回后刷新上一页：
let pages = getCurrentPages();
let beforpage = pages[pages.length - 2];
console.log(beforpage);
if (beforpage.onLoad()) {
beforpage.onLoad();
}
uni.navigateBack();
设置js函数执行同步
function load(){
return new Promise(resolve => {
uni.showLoading({
title: '加载中'
});
uni.request({
url: getApp().globalData.config.url + 'business/informApply/getInstall/' + id,
method: 'GET',
header: {
Authorization: 'Bearer ' + uni.getStorageSync('token')
},
success: res => {
console.log(res);
uni.hideLoading();
resolve();//要加上，意思是告诉执行完成，返回，没有则会一直卡住，不会继续往下执行
}
});
});
}
//调用方法
async test(){
await this.load();//请求完数据再渲染视图
//渲染
}
代码分包：再page.json中修改,增加subPackages属性
"subPackages": [{
"root": "pagesA",
"pages": [{
"path": "reg/set",
"style": {
"navigationBarTitleText": "设置"
}
},
{
"path": "login/login",
"style": {
"navigationBarTitleText": "登录"
}
},
{
"path": "reg/about",
"style": {
"navigationBarTitleText": "关于小程序"
}
}
]
}
]
多增加可配置性选项
就像封装的组件一样，不用改个选项每个页面重复去修改，增强程序的可维护性。
小程序截图
总结
很多时候我们都要去接触新的知识，再小程序开发上我也是边做边入门，很多时候我们遇到问题并不是想着如何快速解决问题，而是如何从这个问题中提升自己解决问题的思维，以前我们都是有功能就拿到功能就开发，写完就简单的测试下，到后面发现还是有BUG或者用户体验不好，还是需要改，同时还要考虑代码的复用性，可配置性，从维护或者后面开发我们不需要付出同样的时间去完成一样的事情，所以说了这么多就2点思维和效率。