【營銷小程序】—— 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項目不一樣，不須要手動拉取代碼到服務器上傳

---

注：未經容許，不得轉載