uni-app實現Android分享到微信朋友圈和微信好友，附DEMO和源碼

原創

TANKING

2019-03-01 15:04

微信分享大家見怪不怪了！就是再APP點擊分享，然後喚起微信，分享當前頁面到朋友圈或者分享給朋友。

所以，我開發了這樣的一個工具。

動圖demo

分享後

就是一個帶有標題、描述文字、LOGO、分享來源的一個小卡片。

開發

這個App是使用uni-app框架開發的。
沒了解過可以取訪問：https://uniapp.dcloud.io/
瞭解一下！

uni-app是一個使用 Vue.js 開發跨平臺應用的前端框架，開發者編寫一套代碼，可編譯到iOS、Android、H5、小程序等多個平臺。

創建項目

1、先下載開發工具HBuilderX
2、創建項目

3、選擇uni-app

4、創建完成後就會有一個模板了。

代碼

5、打開pages/index/index.vue，拷貝下面代碼進去

<template>
    <view class="content">
            <form @submit="formSubmit" @reset="formReset">
                    <input class="uni-input" name="title" placeholder="文章標題"/>
                    <input class="uni-input" name="miaoshu" placeholder="文章描述"/>
                    <input class="uni-input" name="imgurl" placeholder="圖片地址"/>
                    <input class="uni-input" name="url" placeholder="跳轉鏈接"/>
                    <button formType="submit">分享到微信羣或好友</button>
                    <button type="default" formType="reset">清空以上信息</button>
                    <view class="banquan">裏客雲科技開發</view>
            </form>
    </view>
    

    
    
</template>

<script>
    export default {
        data() {
            return {}
        },
        
        // 執行事件
        methods:{
            formSubmit:function(e){
                
                var title = e.detail.value.title;
                var miaoshu = e.detail.value.miaoshu;
                var imgurl = e.detail.value.imgurl;
                var url = e.detail.value.url;
                
                uni.share({
                    provider: "weixin",
                    scene: "WXSceneSession",
                    type: 0,
                    href: url,
                    title: title,
                    summary: miaoshu,
                    imageUrl: imgurl,
                    success: function (res) {
                        console.log(JSON.stringify(res));
                        uni.showToast({
                            title: '已分享',
                            duration: 2000
                        });
                    },
                    
                    fail: function (err) {
    
                        var errrr = JSON.stringify(err);
                        if(errrr){
                            uni.showModal({
                            title: '表單不能留空',
                            content: '請完善所有信息再發起分享',
                            success: function (res) {
                                if (res.confirm) {
                                        console.log('用戶點擊確定');
                                    } else if (res.cancel) {
                                        console.log('用戶點擊取消');
                                    }
                                }
                            });
                        }
                    }
                });
            },
        },
    }
</script>

<style>
    *{margin: 0;padding: 0;}
    .content{
        width: 100%;
        margin: 20px auto;
    }
    
    .content .uni-input{
        width: 80%;
        height: 45px;
        margin: 8px auto;
        border: 1px solid #ccc;
        margin-bottom: 8px;
        padding-left: 8px;
        border-radius: 10px;
        font-size: 16px;
        color: #333;
    }
    
    .content button{
        width: 80%;
        height: 45px;
        line-height: 45px;
        margin: 8px auto;
        border: 1px solid #ccc;
        margin-bottom: 8px;
        padding-left: 8px;
        border-radius: 10px;
        font-size: 16px;
        color: #fff;
        background: #56b273;
        border: none;
    }
    
    button::after{ border: none;}
    
    .content .banquan{
        text-align: center;
        margin-top: 50px;
        font-size: 15px;
        color: #666;
    }
</style>

6、打開manifest.json，點擊App模塊權限配置，給Share（分享）打勾，代表我們給這個App注入一個分享權限。