【零售小程序】—— webview嵌套web端项目（原生开发支付功能）

• index → index.wxml  套webwiew

  // url 活动url   bindmessage 接收信息
  <web-view src=‘{{url}}‘ bindmessage=‘message‘></web-view>　　

• 微信头像昵称：登录与未登录的用户，都必须要获取头像昵称

1. 发（微信分享）的用户 只能通过url传入参数：type、id、invitecode、token　

2. 收（微信分享）的用户 getInfo()拿到本人头像昵称

    /**
      * 获取用户，头像，昵称，
      * 设置webview url
      */
     getUserInfo:function(code) {
       let me = this;
       wx.getUserInfo({
         withCredentials: true,
         lang: ‘‘,
         success: function (res) { 
           // console.log(res, ‘getUserInfo‘)
   
           const { nickName, avatarUrl } = res.userInfo;
           me.setData({
             userInfo:{
               avatarUrl: avatarUrl,
               nickName: nickName
             }
           })
   
           res.jsCode = code;
   
           me.getSelf(res);
         },
         fail: function (res) {
             wx.redirectTo({
               url: ‘../getInfo/getInfo‘,
             })
          },
         complete: function (res) {},
       })
     },
   

• 子功能页 获取数据、存入全局、调用数据

1. 头部必须

   var app = getApp()　　

   调用方法中才可以用app里的数据

   // 全局数据
   app.globalData.index_options　　

2. index -> index.js中的message函数，取到data信息对象，index.wxml中webview里的bindmessage就可以接收信息数据

   message:function(v) {
       
       let data = v.detail.data[v.detail.data.length - 1];
   
       this.setData({
         message: data
       })
   }, 

• APP跳转小程序，打开网页，webview嵌套的项目，微信授权【登录】

  /**
    * 根据凭证获取openid， 
    */
  onLoad: function (options) {
      // wx.hideShareMenu();
      // console.log(options, ‘index.js/options‘, app.globalData.link_url)
      let me = this;
      wx.login({
        success: function (res) {
          //获取openid 
          console.log(res.code)
          me.getUserInfo(res.code)
          
        },
        fail: function (res) {
          wx.showModal({
            title: ‘login失败‘,
            content: ‘信息: ‘ + res.msg,
          })
        }
  });
  

• 点击小程序顶部分享按钮分享时，分享的内容为当前页面的内容，需要使用wx.miniProgram.postMessage【发送信息】

1. H5页面

   window.wx.miniProgram.postMessage({
               data: {……}
   });　　

2. 小程序：

   /**
    * 用户点击右上角分享
    */
   onShareAppMessage: function (ff) {
       console.log(this.data.message)
       let id = this.data.message.id ? this.data.message.id : ‘‘;
       
       if(!id) {
         wx.showModal({
           title: ‘提示‘,
           content: ‘此页面不支持分享‘,
         })
         // return false;
         // return {
         //   title: ‘益合众‘,
         //   path: ‘/pages/index/index‘
         // }
         
       }
   
       let url = this.data.message.url;
       console.log(url)
   
       let title = this.data.message.title ? this.data.message.title:‘分享‘;
       let desc = this.data.message.desc ? this.data.message.desc:null;
       // if (desc) {
       //   return {
       //     title: title + `(${desc})`,
       //     path: ‘/pages/index/index?‘ + url,
       //     success: function (res) { }
       //   }
       // } else {
         return {
           title: title,
           path: ‘/pages/index/index?‘ + url,
           success: function (res) { }
         }
       // }
   }　　

• 支付：共有4个支付pay  -  pay(VIP支付）、activitypay(活动支付）、fanspay(粉丝支付）、mallpay(商城支付）

1. 微信获取openId(关键key) → 下单 → 支付（走接口，后台会返回一些微信支付需要的参数） → 鉴权（调起微信支付）wx.requestPayment  【支付API - 微信开发者文档】

2. 活动支付完，没提示，直接返回活动页

3. 商城支付 返回 订单页面；其它支付 都返回 原页面
   

• 小程序支付成功之后，返回一个res  -  type里的mallPayRes之类，作支付结果提示
• 提交小程序

1. App.js  dev 本地环境  pro 正式环境  test 测试环境

    env: function(val) {
       switch (val) {
         case "dev":
           this.globalData.serverHost = ‘http://192.168.0.116‘;
           this.globalData.serverPort = ‘8099‘;
           this.globalData.host = this.globalData.serverHost + ":" + this.globalData.serverPort;
   
           this.globalData.sec_serverHost = ‘http://192.168.0.116‘;
           this.globalData.sec_serverPort = ‘9099‘;
           this.globalData.sec_host = this.globalData.sec_serverHost + ":" + this.globalData.sec_serverPort;
   
           this.globalData.link_url = ‘http://192.168.0.104:8090‘;
           break;
         case "pro":
           this.globalData.host = ‘https://back.yihezo.cn‘;
   
           this.globalData.sec_host = ‘https://sec.yihezo.cn‘;
   
           this.globalData.link_url = ‘https://yihezo.cn‘;
           break;
         case "test":
           this.globalData.host = ‘https://testback.yihezo.cn‘;
   
           this.globalData.sec_host = ‘https://testsec.yihezo.cn‘;
   
           this.globalData.link_url = ‘https://test.yihezo.cn‘;
   
           break;
       }
   
     },　　

2. 提交前，打开相应变量

   // 指定项目启动模式
   // const envVal = ‘dev‘
   const envVal = ‘test‘
   // const envVal = ‘pro‘
   this.env(envVal);
   console.log(‘配置变量完毕!当前环境: ‘ + envVal)　　

• 上传小程序 - 上传体验版只需要更新，上传正式版需要先提交审核

1. 更新版本号  当前0.7.3，没有特别的意义，下次更新数字做区分即可
2. 填写项目备注 上线更新功能
3. 小程序上传 = 部署，与web项目不同，不需要手动拉取代码到服务器上传

注：未经允许，不得转载

【零售小程序】—— webview嵌套web端项目（原生开发支付功能）

原文：https://www.cnblogs.com/ljq66/p/11996472.html