微信原生嵌套vue网页小程序项目

小松鼠敲代码

已于 2023-04-11 10:58:38 修改

阅读量1.6k

点赞数

文章标签： vue.js 小程序前端 Powered by 金山文档

于 2023-03-22 14:24:39 首次发布

本文链接：https://blog.csdn.net/weixin_56848461/article/details/129708620

版权

首先建立一个原生微信小程序及vue项目

微信嵌套vue网页

<div>
本地路径/生产/测试路径，这个我是vue项目运行后的本地路径
    <web-view src="http://localhost:8080/url"></web-view>
</div>

在要引入的当前页面js文件中获取页面路径 
onLoad: function (options) {
        this.setData({
            url: app.hostUrl.basePath+app.pageUrl[0]
        })
    },

在小程序app.js中配置路径和页面 
// 小程序原生地址前缀配置
  hostUrl: {
    //basePath: ''//正式服
    //basePath : ''//测试服
    basePath: 'http://localhost:8080/' //本地

  },
  //vue页面存放地方
  pageUrl: [
    'personalData', //0 个人中心
    'modifyPhoneNum', //1修改手机号
    'myOrder', //2我的订单
  ],

vue网页跳转微信原生页面

npm install weixin-js-sdk vue项目安装依赖

import wx from 'weixin-js-sdk'; 在需要返回微信原生页的页面引入SDK

wx.miniProgram.navigateTo({url: '/path/to/page'}) //返回需要的页面

我在自己的项目用的是const wx=require('weixin-js-sdk'),这个比较好用，可以推荐

    import 'vant/lib/index.css'
    const wx = require('weixin-js-sdk');
export default {
    // 注册组件
  name: 'HelloWorld',
    created() {
//设置动态的小程序title
        document.title = '这是标题';
    },
    methods:{
//点击事件
        toweixin(){
//返回需要的微信原生页
            wx.miniProgram.navigateTo({url: '/pages/login/login'});
        }
    }

注意：

1、web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信；

2、在 iOS 中，若存在JSSDK接口调用无响应的情况，可在 web-view 的 src 后面加个#wechat_redirect解决；

3、避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent；

4、小程序和H5之间传参

小程序和H5之间互相跳转，我们如果需要传递参数的话可以通过 url 路径拼接的方式来传递参数；

微信小程序

onLoad:function(options){
    console.log(options)
}

mounted(){
    let name = this.getQueryString('name')
    console.log(name )
},
methods:{
    //解析url获取指定参数的值
    getQueryString(name)  {
        const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        const search = window.location.search.split('?')[1] || '';
        const r = search.match(reg) || [];
        return r[2];
   }
}

至此困扰我两天的东西终于可以完美落幕了，后面就可以用vue开发接下来的项目了