基于uni-app的小程序开发事项

微信小程序下iOS需要拉更长才能看到下拉刷新的三个点，而Android是从屏幕顶部下拉，无法从导航栏下方下拉。如果一定要从前端导航栏下拉，小程序下只能放弃原生下拉刷新，纯前端模拟，参考mescroll插件，但这样很容易产生性能问题。目前小程序平台自身没有提供更好的方案非H5端，前端导航盖不住原生组件。如果页面有video、map、textarea(仅小程序)等原生组件，滚动时会覆盖住导航栏如果是小程序下，可以使用cover-view来做导航栏，避免覆盖问题微信通过webview自定义tabbar，在uni-app也支持，但仅支持微信。微信小程序模拟器1.02.1904090版有bug，在缩放模拟器页面百分比后，tabbar点击多次后就会卡死。真机无碍，使用时注意。

分包加载配置，此配置为小程序的分包加载机制。

因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。

所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据pages.json的配置进行划分。

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。此时终端界面会有等待提示。微信小程序每个分包的大小是2M，总体积一共不能超过16M。uni-app内支持对微信小程序、QQ小程序、百度小程序分包优化，即将静态资源或者js文件放入分包内不占用主包大小。配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。

分包优化具体逻辑：

静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用

js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息

main.js:

使用Vue.use引用插件，使用Vue.prototype添加全局变量，使用Vue.component注册全局组件。

可以引用vuex，因涉及多个文件，此处没有提供示例，详见hello uni-app示例工程。

无法使用vue-router，路由须在pages.json中进行配置。如果开发者坚持使用vue-router，可以在插件市场找到转换插件。

组件：

如果开发者写了div等标签，在编译到非H5平台时也会被编译器转换为view标签，类似的还有span转text、a转navigator等，包括css里的元素选择器也会转。但为了管理方便、策略统一，新写代码时仍然建议使用view等组件。

<map> 组件的宽/高推荐写直接量，比如：750rpx，不要设置百分比值。uni-app 只支持 gcj02 坐标

 开发过程遇到的的问题：

1.预览和真机调试按钮用不了：需要配置项目的appid(具有公众号权限的测试号zlj)

2.在uni-app微信小程序中不支持使用相对路径，后根据官方解释尝试以下两种方法： 1.转为base64格式图片菜鸟工具在线转base64.xxx{ background-image:url('data:(此处为转码后的代码)'} 2.把图片上传到测试服务器

3.父与子通信时间：https://www.cnblogs.com/jiajialove/p/10741771.html

子与父通信：子发送事件$emit('自定义事件')，父接收@自定义事件=“methods中的事件名”

图片引用：

登录授权：

微信小程序授权是非常简单和常用的功能，但为了方便，还是在此记录一下要点：

首先是需要用到一个授权按钮来触发获取用户信息授权： 关键在于 open-type 为 getUserInfo , 然后有个@getuserinfo的事件，把获取授权接口写到该事件里面去

<button class="sys_btn" open-type="getUserInfo" lang="zh_CN" @getuserinfo="appLoginWx">小程序登录授权</button>

方法如下：

appLoginWx(){ // #ifdef MP-WEIXIN uni.getProvider({ service: 'oauth', success: function (res) { if (~res.provider.indexOf('weixin')) { uni.login({ provider: 'weixin', success: (res2) => { uni.getUserInfo({ provider: 'weixin', success: (info) => {//这里请求接口 console.log(res2); console.log(info); }, fail: () => { uni.showToast({title:"微信登录授权失败",icon:"none"}); } }) }, fail: () => { uni.showToast({title:"微信登录授权失败",icon:"none"}); } }) }else{ uni.showToast({ title: '请先安装微信或升级版本', icon:"none" }); } } }); //#endif }

 

在 uni.login 和 uni.getUserInfo 被调用后，你可以获取到以下值用于继续请求后端给你的接口：

常用的值大概有：code 、iv 、encryptedData 和 个人基本信息，这些可以传给后端交换得到openid。

 

 

如果需要知道用户当前是否已经授权，则可以使用如下代码：

uniapp的授权文档，可以判断不同的授权类型：https://uniapp.dcloud.io/api/other/authorize?id=authorize

// #ifdef MP-WEIXIN uni.getSetting({ success(res) { console.log("授权：",res); if (!res.authSetting['scope.userInfo']) { //这里调用授权 console.log("当前未授权"); } else { //用户已经授权过了 console.log("当前已授权"); } } }) //#endif

uni.createCanvasContext('abowcanvas',_this)自定义组件会报Property or method "toJSON" :和 HBuilderX 版本无关，新版的微信开发工具有此 Bug，可以先下载回 1.03.2006090