uni-app小程序--授權登錄、分享頁面

uni-app框架寫小程序如何微信授權、分享頁面

首先明確思路：

1.將判斷用戶是否授權邏輯放在App.vue裏，每次用戶進入mounted，判斷用戶是否已經授權過，將授權狀態存在vuex裏，(我測試時先存在了storge裏)

setting(){
 const that = this;
  wx.login({
      //用戶登錄
      success(res) {
          console.log(res.code)
          if (res.code) {
              // 發起網絡請求
              var code = res.code;
              wx.getSetting({
                  //查看用戶是否授權
                  success(res) {
                      console.log(res)
                      if (res.authSetting['scope.userInfo']) {
                          //用戶已經授權
                          wx.getUserInfo({
                            //獲取用戶信息
                              success: (res) => {
                                  console.log(res)
                                  res.userInfo.nickName    // 存起來用戶暱稱
                                  res.userInfo.avatarUrl   // 存起來用戶頭像
								  uni.setStorage({         // 存起來授權狀態
								  	key: 'loginSwitch',
									data: '1'
								  })
			                    },
								fail(err) {
									console.log(err)
								}
                          })
                          // wx.switchTab({
                          //   url: '../counter/main'
                          // })
                      }
                  }
              })
          }
      }
  })
},

如果未授權，在用戶進行相關功能操作時進行判斷vuex裏面存的狀態，提醒用戶跳轉到你寫授權的頁面，讓用戶授權

	  // 我的訂單
	  getMyOrder () {
		  uni.getStorage({            // 判斷用戶授權狀態，提示相應操作
		  	key: 'loginSwitch',
			success(e){
				if (e.data == 1) {
					uni.showToast({
					    title: '跳轉‘我的訂單’頁',
					    duration: 2000,
						icon: 'none'
					});
				} else {
					uni.showToast({
					    title: '請先授權微信登錄！',
					    duration: 2000,
						icon: 'none'
					});
					// 授權放在了user.vue，所以這裏可以跳轉到user.vue，依需求而定
					// wx.switchTab({
                    //   url: '../pages/mine'
                    // })
				}
			},
			fail(err) {
				uni.showToast({
				    title: '請先授權微信登錄！',
				    duration: 2000,
					icon: 'none'
				});
			}
		  })
	  },

一般用戶授權放在最後user頁面，在用戶完全瞭解了小程序的功能後，再選擇是否授權

以上是整體思路，我測試的時候爲爲了省事，將這些邏輯都寫在了user.vue頁面裏，存儲也都用的storge，個人覺得要用vuex。

user.vue內容如下：

<template>
  <div class="indexBg">
    <div class="userinfos">
      <img class="userinfo-avatar" :src="userInfos.avatarUrl"/>
      <p>{{userInfos.nickName}}</p>
    </div>
    <p class="tips">歡迎光臨小店兒，希望在這裏找到你想要的</p>
    <button open-type="getUserInfo" @getuserinfo="bindGetUserInfo">授權微信登錄</button>
	<view>
		<uni-list>
		    <uni-list-item @click="getMyOrder" title="我的訂單" :show-extra-icon="true" :extra-icon="{color: '#4cd964',size: '22',type: 'spinner'}"></uni-list-item>
			<uni-list-item @click="getHistory" title="歷史記錄" :show-extra-icon="true" :extra-icon="{color: '#4cd964',size: '22',type: 'spinner'}"></uni-list-item>
		</uni-list>
	</view>
  </div>
</template>

<script>
import uniList from "@/components/uni-list/uni-list.vue"
import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
export default {
  data () {
    return {
      userInfos: {
        nickName: '',
        avatarUrl: ''
      }
    }
  },

  components: {
    uniList,uniListItem
  },

  mounted () {
      this.setting()
  },
  methods: {
	  // 我的訂單
	  getMyOrder () {
		  uni.getStorage({
		  	key: 'loginSwitch',
			success(e){
				if (e.data == 1) {
					uni.showToast({
					    title: '跳轉‘我的訂單’頁',
					    duration: 2000,
						icon: 'none'
					});
				} else {
					uni.showToast({
					    title: '請先授權微信登錄！',
					    duration: 2000,
						icon: 'none'
					});
				}
			},
			fail(err) {
				uni.showToast({
				    title: '請先授權微信登錄！',
				    duration: 2000,
					icon: 'none'
				});
			}
		  })
	  },
	  // 歷史
	  getHistory () {
		  
	  },
	  // 判斷授權
      setting(){
        const that = this;
        wx.login({
            //用戶登錄
            success(res) {
                console.log(res.code)
                if (res.code) {
                    // 發起網絡請求
                    var code = res.code;
                    wx.getSetting({
                        //查看用戶是否授權
                        success(res) {
                            console.log(res)
                            if (res.authSetting['scope.userInfo']) {
                                //用戶已經授權
                                wx.getUserInfo({
                                  //獲取用戶信息
                                    success: (res) => {
                                      console.log(res)
                                      that.userInfos.nickName = res.userInfo.nickName
                                      that.userInfos.avatarUrl = res.userInfo.avatarUrl
									  uni.setStorage({
									  	key: 'loginSwitch',
										data: '1'
									  })
                                    },
									fail(err) {
										console.log(err)
									}
                                })
                                // wx.switchTab({
                                //   url: '../counter/main'
                                // })
                            }
                        }
                    })
                }
            }
        })
      },
      bindGetUserInfo(e) {
          const that = this;
          if (e.mp.detail.rawData){
              //用戶按了允許授權按鈕
              // that.setting();
			  uni.getStorage({
			  	key: 'loginSwitch',
				success(e) {
					if (e.data == 1) {
						uni.showToast({
							title: '您已經授權過了！',
							duration: 2000
						})
					} else {
						that.setting()
					}
				},
				fail() {
					that.setting()
				}
			  })
          } else {
              //用戶按了拒絕按鈕
              wx.showModal({ 
                title: '提示',
                content: '您拒絕授權，無法進行操作哦！',
                showCancel: false,
                confirmText: '返回授權',
                success: function (res) {
                  // 用戶沒有授權成功，不需要改變 isHide 的值
                  if (res.confirm) {
						console.log('用戶點擊了“返回授權”');
                  }
                }
              })
			  uni.setStorage({
			  	key: 'loginSwitch',
			  	data: '0'
			  })
          }
      },
  },
   onShareAppMessage: function(res) {
    // return eventHandler接收到的分享參數
    return {
      title: '我發現了一家好店，快來看看吧！',  // 分享名稱
      path: 'pages/laugh/index', // 這裏寫你這個頁面的路徑
      imageUrl:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', //這個是顯示的圖片，不寫就默認當前頁面的截圖
      success: function (shareTickets) {
        console.log(shareTickets + '成功');
        // 轉發成功
      },
      fail: function (res) {
        console.log(res + '失敗');
        // 轉發失敗
      },
      complete:function(res){
        // 不管成功失敗都會執行
      }
    }
  },
  created () {
    // let app = getApp()
  }
}
</script>

<style scoped lang="less">
.indexBg{
  height: 100%;
  background: linear-gradient(to bottom, #128dcd 0%,#12cd43 100%);
}
.tips{
  text-align: center;
  color: #fff;
  font-size: 12px;
  margin-bottom: 10rpx;
}
.userinfos {
  display: flex;
  flex-direction: column;
  align-items: center;
  p{
	  text-align: center;
  }
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
  border: 1px solid #eee;
}
.userinfo-nickname {
  color: #aaa;
}
</style>

我的文件目錄如下：

這個components文件夾可以在官網上下載，是uni-app的擴展組件的文件，pages裏面放的就是我的頁面，static下面就放靜態文件，基本寫法和vue差不多。
這個授權要在‘微信開發者工具’裏面調試，去官網下載一個，然後在HbuilderX裏面配置一下路徑，直接在菜單欄裏面運行到微信開發者工具裏面就可以直接打開：

打開之後：

同意授權：

再次授權：

我這個頁面裏還寫了分享事件，它的位置是和methods平級的，只有寫了這個事件的頁面在右上角點開纔有分享的菜單選項，不寫是不能分享當前頁的：

onShareAppMessage: function(res) {
    // return eventHandler接收到的分享參數
    return {
      title: '我發現了一家好店，快來看看吧！',  // 分享名稱
      path: 'pages/laugh/index', // 這裏寫你這個頁面的路徑
      imageUrl:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', //這個是顯示的圖片，不寫就默認當前頁面的截圖
      success: function (shareTickets) {
        console.log(shareTickets + '成功');
        // 轉發成功
      },
      fail: function (res) {
        console.log(res + '失敗');
        // 轉發失敗
      },
      complete:function(res){
        // 不管成功失敗都會執行
      }
    }
  },

如下：

發送給朋友：

看見上下文中的彈窗了嗎，開發版的小程序要讓別人預覽，要在微信公衆平臺將這個人添加爲開發者，就可以了。這裏分享的path是哪個路徑，這個接收到的人打開就是哪個頁面。

uni-app小程序--授權登錄、分享頁面

uni-app框架寫小程序如何微信授權、分享頁面

Spring Cloud 部署時如何使用 Kubernetes 作爲註冊中心和配置中心

解決-刷新頁面Vuex數據丟失

easyui樹結構tree節點加上title

js獲取0-24小時每隔幾分鐘的數組

vue仿寫日曆面板

uni-app小程序--授權登錄、分享頁面

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結