uni-app小程序--授权登录、分享页面

川长思鸟来 2023-06-26 05:42 4阅读 0赞

### 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'
                              // })
                          }
                      }
                  })
              }
          }
      })
    },

1.  如果未授权，在用户进行相关功能操作时进行判断vuex里面存的状态，提醒用户跳转到你写授权的页面，让用户授权  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]

// 我的订单
    	  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'
    				});
    			}
    		  })
    	  },

1.  一般用户授权放在最后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>

我的文件目录如下：  
![在这里插入图片描述][20191230153341955.png]  
这个components文件夹可以在官网上下载，是uni-app的扩展组件的文件，pages里面放的就是我的页面，static下面就放静态文件，基本写法和vue差不多。  
这个授权要在‘微信开发者工具’里面调试，去官网下载一个，然后在HbuilderX里面配置一下路径，直接在菜单栏里面运行到微信开发者工具里面就可以直接打开：  
![在这里插入图片描述][20191230153721415.png]  
打开之后：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 2]  
同意授权：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 3]  
再次授权：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 4]  
我这个页面里还写了分享事件，它的位置是和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){ 
            // 不管成功失败都会执行
          }
        }
      },

如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 5]  
发送给朋友：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 6]  
看见上下文中的弹窗了吗，开发版的小程序要让别人预览，要在微信公众平台将这个人添加为开发者，就可以了。这里分享的path是哪个路径，这个接收到的人打开就是哪个页面。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191230160336771.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[20191230153341955.png]: https://img-blog.csdnimg.cn/20191230153341955.png
[20191230153721415.png]: https://img-blog.csdnimg.cn/20191230153721415.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191230153911689.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191230153934491.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191230154001255.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191230154045278.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191230154532134.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191230154655712.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70