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

index → index.wxml 套webwiew

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

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

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

收（微信分享）的用户 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) {},
    })
  },

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

头部必须

var app = getApp()

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

// 全局数据
app.globalData.index_options

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【发送信息】

H5页面

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

小程序：

/**
 * 用户点击右上角分享
 */
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(商城支付）

微信获取openId(关键key) → 下单 → 支付（走接口，后台会返回一些微信支付需要的参数） → 鉴权（调起微信支付）wx.requestPayment 【支付API - 微信开发者文档】
活动支付完，没提示，直接返回活动页
商城支付返回订单页面；其它支付都返回原页面

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

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;
    }

  },

提交前，打开相应变量

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

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

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

注：未经允许，不得转载