zoukankan      html  css  js  c++  java
  • UNIAPP

    准备工作,见传送门:UNI-APP 开发微信公众号(H5)JSSDK 的使用方式 - DCloud问答

    主要是导入 jweixin 和配置注册信息 

     

     

    1. main.js添加以下代码

     

     

    Vue.config.ignoredElements = ['wx-open-launch-weapp'];

     

    2. 示例

    如果 <script type="text/wxtag-template"> 标签需要放入图片,传统的渲染实现不了 需要用

    用微信小程序原生的渲染方式

    <img src="{{item.xx}}" />
    <template>
        <view class="content">
            <!-- 样式类的话貌似只能在style的内联样式或行内样式才生效 -->
            <wx-open-launch-weapp id="launch-btn" @launch="handleLaunch" @error="handleError" username="gh_cxxxxx" path="pages/index/index.html">
                <script type="text/wxtag-template">
                     <style>
                      .btn { padding: 12px;opacity:0 }
                    </style>
                    <button class="btn">打开小程序</button>
                </script>
            </wx-open-launch-weapp>
        </view>
    </template>
    
    <script>
    // 这里做个示例,实际上的jweixin sdk是需要你看第一步通过npm或yarn安装
    import wx from 'jweixin-module';
    
    export default {
        data() {
            return {};
        },
        onLoad() {
            this.getConfig();
        },
        methods: {
            // wx api 注册
            getConfig() {
                wx.config({
                    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                    appId: appId, // 必填,公众号的唯一标识,填自己的!
                    timestamp: timestamp, // 必填,生成签名的时间戳,刚才接口拿到的数据
                    nonceStr: nonceStr, // 必填,生成签名的随机串
                    signature: signature, // 必填,签名,见附录1
                    jsApiList: ['wx-open-launch-weapp'],
                    openTagList: ['wx-open-launch-weapp'] // 跳转小程序时必填
                });
    
                wx.ready(res => {
                    console.log(res);
                    this.$nextTick(() => {
                        let btn = document.getElementById('launch-btn');
                        btn.addEventListener('launch', e => {
                            console.log('success');
                        });
                        btn.addEventListener('error', e => {
                            alert('小程序打开失败');
                            console.log('fail', e.detail);
                        });
                    });
                });
    
                wx.error(res => {
                    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
                    console.log(res);
                });
            },
            // 监听跳转
            handleLaunch() {
                console.log('跳转');
            },
            // 监听错误
            handleError() {
                console.log('失败');
            }
        }
    };
    </script>
    
    <style></style>

     

     

     

  • 相关阅读:
    C# 小算法1
    函数 y=x^x的分析
    随机数
    对拍
    Cube Stack
    Permutation
    一笔画问题
    康托展开&&康托逆展开
    待完成
    小错误 17/8/10
  • 原文地址:https://www.cnblogs.com/cisum/p/14016085.html
Copyright © 2011-2022 走看看