微信公眾號開發 2 : weixin-JS-sdk 的使用

September發表於2019-08-21
JS

上一篇成功引入we-vue,可以方便的使用weui的元件，這篇介紹如何使用wexin-js-sdk。在coding的過程中，本以為會非常easy，因為之前用的laravel的擴充套件包easywechat,但事與願違，遇到了很多麻煩，好不容易解決了，然後把流程簡單記錄下來。

  1. 安裝wexin-js-sdk
npm install weixin-js-sdk
  1. 然後按照微信公眾開發平臺裡的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>
  1. 後端配置資訊資訊介面程式碼如下，用的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);
    }
  1. 編譯檢視效果 ok了
本作品採用《CC 協議》，轉載必須註明作者和本文連結
日照香爐生紫煙

相關文章