关于H5嵌套小程序哪些事

1.使用webview跳转回小程序以及传参

使用miniProgram.navigateTo跟微信jssdk版本有关

this.$wx.miniProgram.navigateTo({
      url:'/pages/login/login?redirectUrl='+encodeURIComponent(redirectUrl),
 });
全局公共方法在vue中的main.js中配置demo如下
//----------------公共方法开始---------------------
import apiUrl from "./utils/apiUrl.js";
import tools from "./utils/tools.js";
import configCom from "../configCom.js";
import wx from "tencent-wx-jssdk"
Vue.prototype.$apiUrl = apiUrl;
Vue.prototype.$tools = tools;
Vue.prototype.$config = configCom;
Vue.prototype.$wx = wx;
//----------------公共方法结束---------------------

其中需要注意的是H5使用miniProgram.navigateTo向小程序传参最好使用encodeURIComponent进行编码一下,否则含有问号的参数会被小程序截断掉,小程序中接受参数方式为

pages/login/login.js
import apiUrl from '../../utils/apiUrl.js'
let app = getApp();
Page({
  data: {
    redirectPath:"pages/guide/guide",//重定向地址,如果不是分享进入,默认是引导页面
    redirectUrl:"",
    unloginUrl:'',
  },
  onLoad: function (options) {
    this.showAppParams(options);
    //page页面只是获取上一个页面传过来的参数,path、url是options的参数
    var {path,url,redirectUrl} = options;
    //上一个页面路径
    if(path){
      this.setData({
        redirectPath:path
      });
    }
    //分享进入,获取分享的地址
    if(url && url!="undefined" && url!="null"){
      this.setData({
        redirectUrl:url
      });
    }
    // 未登录重定向参数
    if(redirectUrl && redirectUrl!="undefined" && redirectUrl!="null" ){
      this.setData({
        redirectUrl:redirectUrl
      });
    }
  },
  //检测options里面的内容 后台写的接口
  showAppParams(options){
      var url = apiUrl.getUrl(app.globalData.userId);
      var opt = encodeURIComponent(JSON.stringify(options));
      wx.request({
        url:`${url.showAppParams}&params=Login>>>>${opt}`,
        success(res){
        }
      });

    },
  //授权登录点击事件
  bindGetUserInfo(e){
    var that = this;
    var url = apiUrl.getUrl(app.globalData.userId);
    let {encryptedData,iv} = e.detail;
    let code = app.globalData.code;
    if(e.detail.userInfo){   //授权用户信息-确定
        //用户信息
        var userInfo = e.detail.userInfo;
        var nickName = userInfo.nickName;
        var userPhoto = userInfo.avatarUrl;
        //存储用户信息
        app.globalData.userInfo = userInfo;
        wx.request({     
  url:`${url.decodeUserInfo}&encryptedData=${encodeURIComponent(encryptedData)}&iv=${encodeURIComponent(iv)}&code=${encodeURIComponent(code)}`,
          method: 'post',
          success(data){
            var result = data.data
            if(result.code=="000000"){
              var openId = result.data.openId;//openId
              var unionId = result.data.unionId;//unionId
              //小程序用户信息保存-存储用户信息,存储缓存id
              wx.request({
                method:"POST",                  
 url:`${url.saveWxAppUser}&wxAppOpenId=${openId}&unionId=${unionId}&nickName=${nickName}&userPhoto=${userPhoto}`,
                success(res){
                  var result = res.data.data;
                  //存储缓存id
                  app.globalData.userId = result.id;
                  // 重定向,如果不是分享进入,默认是引导页面,是分享进入,跳转分享的页面
                  //H5分享,还需要可继续传递
                  if(that.data.redirectUrl){
                    wx.redirectTo({
                      url: "/"+that.data.redirectPath+"?url="+encodeURIComponent(that.data.redirectUrl) 
                    });
                  }
                  //通过小程序本身分享的,直接跳转
                  else{
                    wx.redirectTo({
                      url: "/"+decodeURIComponent(that.data.redirectPath)
                    });
                  }
                }
              });
            }else{
              wx.showModal({
                title: '提示',
                content: '系统异常',
                showCancel:false,
                success (res) {
                  if(res.confirm){
                    wx.redirectTo({
                      url:"/pages/close/close"
                    })
                  }
                }
              });
              return;
            }
          }
        });
    }else{                //授权用户信息-取消
        //强制用户授权
        // wx.showModal({
        //   title: '警告',
        //   content: '您点击了拒绝授权,将无法进入小程序,请授权之后再进入!',
        //   showCancel: false,
        //   confirmText: '返回授权',
        //   success: function (res) {
        //     if (res.confirm) {}
        //   }
        // });
    }
  },
})
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,047评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,807评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,501评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,839评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,951评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,117评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,188评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,929评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,372评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,679评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,837评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,536评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,168评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,886评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,129评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,665评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,739评论 2 351

推荐阅读更多精彩内容

  • 小程序 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。同时...
    极乐叔阅读 21,981评论 0 7
  • 前言、背景 本人目前的工作岗位是安卓工程师,在这之前对于前端和后台的知识基本是白纸,只是在日常的工作项目中有需要和...
    浅默Lynn阅读 25,062评论 27 27
  • 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。同时提供一系...
    衣咸阅读 20,594评论 0 5
  • 小程序面试题 小程序授权登录流程 0、如何获得用户信息...
    X秀秀阅读 1,809评论 0 8
  • 终于第一次做好了包子,将小称摆出来称面剂子,面发得很好,而且蒸了之后没有塌下来。一上午调三种馅,包了馄饨,饺子,包...
    楚楚蒙阅读 519评论 11 7