微信公众号开发 2 : weixin-JS-sdk 的使用

上一篇成功引入we-vue,可以方便的使用weui的组件，这篇介绍如何使用wexin-js-sdk。在coding的过程中，本以为会非常easy，因为之前用的laravel的扩展包easywechat,但事与愿违，遇到了很多麻烦，好不容易解决了，然后把流程简单记录下来。

1. 安装wexin-js-sdk

npm install weixin-js-sdk

2. 然后按照微信公众开发平台里的jssdk的说明文档，按步骤（下面是index组件的代码）
   • 绑定域名
   • 引入JS文件
   • 通过config接口注入权限验证配置

<template>
        <div class="page page-with-padding"  >
                <div style="width: 100%;height: 300px;"></div>
                <wv-button @click.native="photo" type="primary">拍照</wv-button>
        </div>
</template>

<script>
    import wx from 'weixin-js-sdk'
    import axios from 'axios'
    export default {
        name: "index",
        data(){
            return {
                'title':'xxxx'
            }
        },
        created(){
            axios.get('/api/wechat/buildConfig')
                .then(function (response) {
                    wx.config({
                        debug: false,
                        appId: response.data.appId,
                        timestamp: parseInt(response.data.timestamp),
                        nonceStr: response.data.nonceStr,
                        signature: response.data.signature,
                        jsApiList: [
                            'chooseImage',
                            'uploadImage'
                        ]
                    })
                        wx.ready(function() {
                            console.log('ready')
                        })
                })
                .catch(function (error) {
                    console.log(error);
                })
        },
        mounted(){
        },
        methods:{
            photo(){
                wx.chooseImage({
                    success: function (res) {
                    },fail(res){
                    }
                })
            }
        }
    }
</script>
<style scoped lang="scss">
</style>

3. 后端配置信息信息接口代码如下，用的easywechat的扩展包，生成配置信息非常方便，easywechat官网（https://www.easywechat.com/）

  public function buildConfig(){
        $app = app('wechat.official_account');
        $app->jssdk->setUrl('http://xxx.cn/wechat/enroll');
        $config =  $app->jssdk->buildConfig(['chooseImage','previewImage','uploadImage','downloadImage'], $debug = true, $beta = false, $json = true);
        return response($config);
    }

4. 编译查看效果 ok了

本作品采用《CC 协议》，转载必须注明作者和本文链接