基于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