【原生微信小程序】组件的使用，权限弹窗

1， pages 同级页面增加文件夹（components）

2，组件文件夹内容还是老四样

![在这里插入图片描述](https://img-blog.csdnimg.cn/b541b617e2734b2b8b767e7dae178efb.png

3，弹框组件的内容
wxml 文件

<!-- 弹窗 -->
<view class="shade" wx:if="{{show_loadnote}}"></view>
<view class="reminder" wx:if="{{show_loadnote}}"><view class="reminder_title"><view class="title_text">{{title}}</view></view><view class="reminder_content">{{content}}</view><view class="reminder-btn"><button class="confirm" style="width:50%;" catchtap="close_reminder" >{{cancel}}</button><button class="cancel"  bindgetphonenumber="getPhoneNumber" open-type="getPhoneNumber" style="width:50%;">{{confirm}}</button><!-- <button class="cancel"  bindtap="getUserProfile" open-type="getUserInfo" style="width:50%;">{{confirm}}</button> --><!-- <button style='background-color: transparent; width:100%; height:100%;' class="authbtn" hover-class="none" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">授权登录</button> --></view>
</view>

wxss 文件

/* 弹窗 */
.shade{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-color: rgba(0, 0, 0, 0.4);z-index: 2;
}
.reminder{width: 80%;background-color: #fff;border-radius: 10rpx;overflow: hidden;top: 30%;left: 10%;position: absolute;z-index: 3;
}
.reminder_title{width: 94%;
padding-left: 3%;
padding-right: 3%;
margin-top: 4%;
}
.title_text{width: 100%;text-align: center;font-weight: 600;
}
.reminder_content{width: 100%;height: 240rpx;line-height: 240rpx;text-align: center;color: #555;
}
.reminder-btn{width: 100%;display: flex;justify-content: space-around;}
.confirm{color: #555;border-top: 1px solid #f8f8f8;border-right: 1px solid #f8f8f8;font-size: 32rpx;background-color: #fff;
}
.reminder-btn button{border-radius: 0px;font-weight: 400;height: 110rpx;line-height: 80rpx;
}
.cancel{color:#2979FF;border-top: 1px solid #f8f8f8;font-size: 32rpx;background-color: #fff;
}

js文件

Component({//组件的属性可以直接在组件标签上定义properties: {title:'提示',// 属性名content:'此功能需要登录使用',confirm:'确定',cancel:'取消',show_loadnote:false,},data: {// 私有数据，可用于模板渲染onload:0,titlename:'详情',scienceid:'',usermessage:{userid:'',NickName:'',HeadUrl:'',openid:'',session_key:'',}},methods: {//方法close_reminder:function(){console.log('000')this.setData({show_loadnote:false})wx.showToast({title: '部分功能无法使用',icon:'none',})},getUserProfile(e){let that=this;let a = wx.getStorageSync('usermessage');//同步获取console.log(a);let b=0;if (a) {b=1;that.setData({onload:1,usermessage: userme,})}else{b=0;}if(b==0){// 获取用户头像昵称wx.getUserProfile({desc:'用于完善用户资料',success:(res)=>{let n='usermessage.NickName';let a='usermessage.HeadUrl';that.setData({[n]:res.userInfo.nickName,[a]:res.userInfo.avatarUrl,})console.log(that.data.usermessage);// 登录wx.login({success(res){if(res.code){wx.request({url:'https://lujinga/user/getsessionkeydemo',//假地址data:{code:res.code},success(res){let o='usermessage.openid';let s='usermessage.session_key';that.setData({[o]:res.data.openid,[s]:res.data.session_key,})console.log(that.data.usermessage);wx.request({url: 'https://tlujing/api/user/authlogin',//假路径method:'POST',data:{openid:that.data.usermessage.openid,NickName:that.data.usermessage.NickName,HeadUrl:that.data.usermessage.HeadUrl},success(res){console.log(res);let id='usermessage.userid';that.setData({[id]:res.data.userid,onload:1})var usermessage=that.data.usermessage;usermessage=JSON.stringify(usermessage);wx.setStorage({key:'usermessage',data:usermessage,})wx.showToast({title: '登录成功',icon:'success',duration:2000})console.log(that.data.usermessage);}})}})}}})}})}else{console.log(已登录);}this.setData({show_loadnote:false})},// 授权手机号getPhoneNumber(e){let that=this;let a = wx.getStorageSync('usermessage');//同步获取console.log(a);let b=0;if (a) {b=1;that.setData({onload:1,usermessage: userme,})}else{b=0;}if(b==0){// 用户拒绝授权if(e.detail.errMsg == "getPhoneNumber:fail user deny") {wx.showToast({icon: "none",title: '请允许获取手机号，否则功能不可用！',})return}// console.log(e.detail,'用户信息')// console.log("e.detail.iv=->", e.detail.iv); //包括敏感数据在内的完整用户信息的加密数据,需要解密// console.log("e.detail.encryptedData->", e.detail.encryptedData); //加密算法的初始向量，解密需要用到console.log(that.data.usermessage);wx.setStorageSync('usermessage', '数据')// 登录wx.login({success(res){if(res.code){wx.request({url:'https://lujinga/user/getsessionkeydemo',//假地址data:{code:res.code},success(res){let o='usermessage.openid';let s='usermessage.session_key';that.setData({[o]:res.data.openid,[s]:res.data.session_key,})console.log(that.data.usermessage);wx.request({url: 'https://tlujing/api/user/authlogin',//假路径method:'POST',data:{openid:that.data.usermessage.openid,NickName:that.data.usermessage.NickName,HeadUrl:that.data.usermessage.HeadUrl},success(res){console.log(res);let id='usermessage.userid';that.setData({[id]:res.data.userid,onload:1})var usermessage=that.data.usermessage;usermessage=JSON.stringify(usermessage);wx.setStorage({key:'usermessage',data:usermessage,})wx.showToast({title: '登录成功',icon:'success',duration:2000})console.log(that.data.usermessage);}})}})}}})}else{console.log(已登录);}this.setData({show_loadnote:false})},},lifetimes: {},})

4，需要的文件，下引入使用
json文件引入

   "usingComponents": {"load_note":"../../components/load_note/load_note"}

wxml 文件引入

<!-- 登录组件 -->
<load_note title="提示" content="此功能需要登录使用" confirm="确定" cancel="取消" show_loadnote="{{show_loadnote}}"></load_note>

js 文件引入

Page({data: {show_loadnote: false}，onLoad() {var user = wx.getStorageSync('usermessage');if(user){this.setData({show_loadnote: false})}else{this.setData({show_loadnote:true})}}}）

【原生微信小程序】组件的使用，权限弹窗相关推荐

基于原生微信小程序的时间组件
作者的絮叨在开发原生微信小程序的时候,发现很少有基于原生微信小程序开发的相关插件或组件,不知道是不是我的孤陋寡闻,还是真的很少,暂且不管~下面我介绍一下我当时开发的一个时间组件,比较简陋,希望可以给 ...
原生微信小程序，搜索框（search）组件
原生微信小程序,搜索框(search)组件首先创建组件及两个跳转页面,第一个是搜索框所在的页面(首页),第二个是搜索详细页搜索框的本质是:搜索框不是input,而是navigate,跳转到专门的搜 ...
原生微信小程序自定义组件以及组件间通讯
文章目录前言一.新建组件二.文件介绍 1.index.json 2.index.js 三.在父组件中引入子组件四.父子组件通讯属性绑定事件绑定获取组件实例总结前言当我们在开发项目时 ...
mpvue 微信小程序api_第三方框架与原生微信小程序开发框架性能之比较 | Q荐读...
作者 | 崔红保编辑 | 王莹自 2017年1月9日微信小程序诞生以来,历经 2 年多的迭代升级,已有数百万小程序上线,成为继 Web.iOS.Android 之后,第四大主流开发技术. 与之相随, ...
微信小程序组件、路由、组件通信、侦听器
一.微信小程序组件组件就是小程序页面的组成结构,与html在web网页开发中的作用一样,铺设页面.可以参考其他UI库,像elementUI,vantUI组件组件是视图层的基本组成单元. 组件自带一 ...
【微信小程序】---- redux 在原生微信小程序的使用实例
weapp-redux 下载 weapp-redux 使用实例下载预览开发 1. 目标学会 redux 在原生微信小程序的使用: 学习和思考微信小程序中封装 Provider: 2. 引入 re ...
【微信小程序】三、微信小程序组件的基本使用
五.微信小程序组件微信小程序框架为开发者提供了一系列组件,开发者可以通过组合这些组件进行快速开发. (1)微信小程序组件基础概念什么是组件? 组件是视图层的基本组成单元. 组件自带一些功能与微信风 ...
原生微信小程序，scroll-view的使用，一屏两个滚动区域，scroll-y（纵向滚动）
原生微信小程序,scroll-view的使用,一屏两个滚动区域,scroll-y(纵向滚动) 这个会简单很多结构层 <view class="container">& ...
微信小程序组件库开发记录
微信小程序组件库开发记录背景前言技术选型环境搭建安装 gulp 将`scss`编译为`wxss` 压缩`wxml`,`js`,`json`文件和图片拷贝文件到另一个目录删除目录整合创 ...
android img标签属性_微信小程序组件叠加效果（如 Android 中的添加蒙层）
实现的效果如下: 可以看出这是由image组件和text组件叠加到一块组成的蒙层效果. 在小程序中实现这个效果主要用到z-index属性和position属性 z-index的使用必须是双方组件都设置 ...

【原生微信小程序】组件的使用，权限弹窗

【原生微信小程序】组件的使用，权限弹窗相关推荐

最新文章

热门文章

【原生微信小程序】 组件的使用，权限弹窗

【原生微信小程序】 组件的使用，权限弹窗相关推荐

最新文章

热门文章

【原生微信小程序】组件的使用，权限弹窗

【原生微信小程序】组件的使用，权限弹窗相关推荐