微信小程序这一块（下）

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

　　　　组件跳转

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

　　　　如果需要跳转那么

　　　　<navigator url="/pages/logs/logs" open-type="switchTab">日志页面</navigator>
6、如何获取用户个人信息？
　　通过button　　设置open-type属性，值为getuserInfo　　通过bindgetuserInfo事件来获取用户的信息
　　<button></button>button按钮获取　　最主要的任务：获取用户信息 
<!--pages/try/try.wxml-->
<button open-type="getUserInfo" bindgetuserinfo="bindgetuserinfo">点击</button>
<!-- 设置open-type="getUserInfo"获取用户信息 -->
<!-- bindgetuserinfo从这个回调中获取用户信息 -->
<!-- 详情可见：https://developers.weixin.qq.com/miniprogram/dev/component/button.html下 -->



<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验证失败

　　

 

 
　　

　　

posted @ 2019-12-11 20:53  前端开发人员  阅读(266)  评论(0)  编辑  收藏  举报