[移动开发]vue 公众号开发跳转小程序的实现

? ? ? ?近期项目中要做公众号H5开发，涉及到指定分享URL及分享界面限定，图片上传，H5跳转小程序等功能，在此做部分记录。

? ? ?1. 以上功能都必须基于微信sdk授权，因此第一步的微信授权不可少，引入wx-sdk模块

import wx from "weixin-js-sdk";

在vue入口处app.vue，加载wx.config()

注：对于ios设备，获取window.location.href 进行授权链接，对hash路由，可截取#之前路由进行授权。

2 指定分享页，可在路由中配置页面是否需要展示分享权限，在router after后加载

 wx.ready(function() {
    if (type) {
       wx.showOptionMenu();
       // wx.showAllNonBaseMenuItem();
    } else {
        wx.hideOptionMenu();
        // wx.hideAllNonBaseMenuItem();
    }
})

3 指定分享url

在分享页面加载wx.ready(function () {}），注入title,dese,link,imgUrl等信息

4? 图片上传

初始话sdk时，在jsApiList? 加入?chooseImage

在使用页面

        // 添加图片按钮，调用方法
        addWenxinImage() {
            let  _this = this;
            let limitNum = 3 - this.imgList.length
            if(limitNum==0){
                this.commitAlert(this, "最多上传三张图片。")
                return
            }
            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function(res) {
                    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    localIds.forEach((localId=>{
                        _this.getLocalImgData(localId)
                    }))
                },
                fail:function(res){
                    
                }
            });
        },
        // 根据图片localId，获取图片base64数据
        getLocalImgData(localId) {
            console.log("getLocalImgData", localId)
            let _this  = this;
            wx.getLocalImgData({
                localId: localId, // 图片的localID
                success: function(res) {
                    var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                    // 兼容安卓不带头及ios的jgp
                    if (localData.indexOf('data:image') != 0) {                       
                        //判断是否有这样的头部                                               
                        localData = 'data:image/jpeg;base64,' +  localData                    
                    }  
                    localData =  localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
                    _this.imgList.push(localData);// imgList用于前端展示图片
                },
                fail:function(res){
                }
            });

        }

5，h5跳转小程序

1. ? ?微信sdk初始话时，加入开放标签? wx.config({openTagList:['wx-open-launch-weapp']}
2. ? ?vue编译时屏蔽编译，Vue.config.ignoredElements = ['wx-open-launch-weapp'];
3. ? 使用处

   <wx-open-launch-weapp
      id="launch-btn-listen"
      username="xxx"
      :path="`/pages/index/index?path=5&type=${wechatType}&url=${listenData}`"
      @error="handleErrorFn" @launch="handleLaunchFn">
   > 
     <script type="text/wxtag-template">
          <style>
             .dt-btn-img {color:#9B1D1F;}
          </style>
          <div class="dt-btn-img"> <img src="data:image/png;base64,iVBORw0KGgoAAA" alt="" class="dt-btn">
          </div>
     </script>
   </wx-open-launch-weapp>
   
   // 注意：微信script, 图片使用相对路径的话，会因路径问题无法展示，可转化为base64,样式可使用类写在style里，
   //  wx-open-launch-weapp 的username 为小程序的原始id，gh_ 开头，path为小程序内页面路径及参数，如果path参数还有参数，可以先进行encodeURIComponent()操作

   详见：目录 | 微信开放文档