1、Uni-APP 集成微信jsapi，在IOS环境下授权失败

Uni-APP 集成微信jsapi，在IOS环境下授权失败，无法扫码以及获取定位解决方案

1、问题

• 需求：

  在微信公共号H5微应用中实现获取定位和二维码扫码功能

2、解决方案：

• 2.1、在 uni-app 项目的根目录，执行 npm 命令:

npm install jweixin-module --save

• 2.2、在uni-app主页采用 window.open() 打开子页面

这步操作很重要，在实际的调试过程中在没有使用 window.open() 的时候，子页面即使签名成功，点击扫码时会弹出两次

/*
用relanuch的话底部的tab栏是空白的
redirectTo不显示底部tab栏
switchTab，navigateTo不跳转
*/
if(是否子页面需要特殊权限){
   // 这里的子页面调用了扫码和定位API（在IOS环境下必须这样，才能有效）
   window.open(this.config.webUrl+ url);
} else {
   uni.navigateTo({
        url: url
   })
}

• 2.3、在功能vue页面，引入 jweixin-module， 实现签名

import * as wx from 'jweixin-module';

• 2.4、在 onReady() 函数中 通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

通过error接口处理失败验证

wx.error(function(res){
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

通过ready接口处理成功验证

wx.ready(function(){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

示例代码：

wx.error(function(res){
    // 异常处理，重新打开当前页面，使签名通过
    window.open(this.config.webUrl+'/pages/code/index');
});
wx.ready(function(){
    // 正常逻辑，在安卓环境直接到这里
});

• 2.5、完善返回首页问题

[danger] 因为主页采用了window.open() 方式打开子页面，这里无法使用uni-app的返回函数，会出现多次返回问题，因此这里实现了一个模拟的返回功能

3、完整代码示例：

<template>
    <view class="bg-white" style="height: 100%;">
        <view class="cu-custom fixed" :style="[{height:CustomBar + 'px'}]">
            <view class="cu-bar fixed bg-gradual-write" :style="style">
                <view class="action" @tap="backPage">
                    <text class="cuIcon-back"></text>
                    <slot name="backText"></slot>
                </view>
                <view class="content" :style="[{top:StatusBar + 'px'}]">
                    <slot name="content">自定义标题</slot>
                </view>
                <slot name="right"></slot>
            </view>
        </view>
        <view>
            其他代码
        </view>
    </view>

</template>

<script>
    import * as wx from 'jweixin-module';
    export default {
        data() {
            return {
                StatusBar: this.StatusBar,
                CustomBar: this.CustomBar
            }
        },
        computed: {
            style() {
                var StatusBar= this.StatusBar;
                var CustomBar= this.CustomBar;
                var bgImage = this.bgImage;
                var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
                if (this.bgImage) {
                    style = `${style}background-image:url(${bgImage});`;
                }
                return style
            }
        },
        onLoad(option) {

        },
        onUnload() {

        },
        onReady() {
            wx.config({
              debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: '', // 必填，公众号的唯一标识
              timestamp: , // 必填，生成签名的时间戳
              nonceStr: '', // 必填，生成签名的随机串
              signature: '',// 必填，签名
              jsApiList: [] // 必填，需要使用的JS接口列表
            });
            wx.error(function(res){
                // 异常处理，重新打开当前页面，使签名通过
                window.open(this.config.webUrl+'/pages/code/index');
            });
            wx.ready(function(){
                // 正常逻辑，在安卓环境直接到这里
            });
        },
        onShow() {

        },
        methods: {
            backPage(){                
                uni.switchTab({
                    url: "/pages/tabbar/index/index",
                })
            },
            // 其他业务代码
        },

    }
</script>