微信小程序这一块（下）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1、小程序分为两部分：页面、组件

2、小程序中如何定义自定义组件？

凡是通过Page创建的都是页面，而通过Components创建的都是组件

当组件创建成功后，在需要使用的页面进行引入，（找到页面的json文件中的usingComponents配置项进行引入，key值是组件名称，value值是组件的路径）

！！！注意：自定义组件的事件必须放在methods中去

3、小程序中自定义组件如何进行传递参数

页面与组件进行传参？

给组件绑定自定义属性

在组件内部通过properties进行接收

-----------------------------------------------------------

组件与页面进行传参

给组件绑定自定义事件bind自定义事件名称

在组件内部通过生命周期attached进行传递，在attached中通过调用this.triggerEvent进行事件的传参（第一个参数为自定义事件名称，第二个参数是需要传递的参数）

4、小程序中存储、读取、删除数据

onLoad(){
// wx.setStorage({//存储数据异步
// key:"wang",
// data:[{name:"wangwenchao",age:"20"}],
// success:function(){//在回调中可以验证是否存储成功
// console.log("存储成功")
// }
// }) // wx.setStorageSync("city",[{name:111,age:888}])//异步存储数据 // wx.getStorage({//异步获取数据
// key:"wang",
// success:function(data){
// console.log(data)//这里是你要获取的数据
// }
// }) // var data=wx.getStorageSync("wang")//同步获取数据
// console.log(data) // wx.removeStorage({//异步删除数据
// key:"wang",
// success:function(){
// console.log("删除成功")
// }
// }) // wx.removeStorageSync("city")//同步删除
// console.log("删除成功") }

详情见：https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorage.html

5、小程序中的路由跳转：

微信Api跳转，

wx.switchTab、wx.natigator

详情见：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html

组件跳转

<navigator url="/pages/logs/logs">日志页面</navigator>url是跳转路径，默认是，当前页面如果有tabBar那么不支持跳转

如果需要跳转那么

详情见：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html下

6、如何获取用户个人信息？

通过button设置open-type属性，值为getuserInfo通过bindgetuserInfo事件来获取用户的信息

api获取详情见https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html

<button></button>button按钮获取最主要的任务：获取用户信息

<button open-type="getUserInfo" bindgetuserinfo="bindgetuserinfo">点击</button>


<view>用户昵称：{{username}}</view>
<view>用户头像：
<image src="{{userPic}}"></image>
</view>

Page({
data:{
username:"",
userPic:""
},
bindgetuserinfo(e){//获取信息的函数
console.log(e)
let data=e.detail.userInfo
this.setData({
username: data.nickName,
userPic: data.avatarUrl
})
}
})

7、用户授权的方式？

wx.authorize用户授权（出userInfo以外的授权）

wx.openSetting手动授权

wx.getSetting查看用户是否授权

App({
onLaunch(){
//进入小程序，主动发起授权，检测是否授权
wx.getSetting({
success:function(data){
if (!data.authSetting['scope.userLocation']){
//如果未授权，那么主动调用授权方法
wx.authorize({
scope: 'scope.userLocation',
success:function(e){
console.log(e)
}
})
}
// console.log(e)
}
})
// console.log("进入小程序")
},})

8、小程序登录流程：

wx.login获取code值--------通过wx.request将code值发送到服务端-------服务端通过微信登陆验证接口获取session_key和openid-------将session_key融入到token当中并将token发送到客户端-------客服端请求数据是携带token到服务端进行验证

如何将code融入到token地址：https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html

token验证流程：将用户名密码发送到服务端，验证成功以后会派发一个token到客服端，客服端进行数据请求的时候需要携带token到服务端，此时服务端会对比这个token是不是当时派发的那个，如果验证成功返回对应的数据，否则token验证失败