OpenId / UnioId / UserId

微信有2种授权登录

1.静默登录
2.非静默登录
静默登录:
用户登录页面毫无感知.
非静默登录:
用户登录会先弹出需要授权信息的弹窗或者页面,确认授权后不仅可以拿到用户的openId(或者UnionID),还有昵称,头像等更多资料.

1. openID:

每个用户针对每个公众号(或者小程序.或移动应用)会产生一个唯一的OpenID.

2. UnionID:

如果需要在多公众号,移动应用之间做用户共通,则需要前往微信开发平台,将这些公众号和应用绑定到一个开放平台账号下,绑定后,一个用户虽然对多个公众号和应用有多个不同的OpenID,但他对所有这些同一开放平台账号下的公众号和应用,只有一个UnionID.

3.userID

userID是自己建的账户数据表的字段,用来作为用户唯一标识.一个用户只有一个userID

举个列子:

======
你分别在农行,工行,建行,各办理1张银行卡,这三张银行卡号彼此毫无关联的,但绑定的都是你的身份证号.

身份证就是 unionID
银行卡号就是 OpenID

app pc, 服务号,小程序,建立userID 打通用户体系

1.非微信体系通过绑定同一手机号;

2.在微信体系内,将这些应用绑定在一个微信开方平台账号下,通过unionID来识别用户唯一性.

在这里插入图片描述

当然有时候业务需求,需要手机号绑定.有时候会出现绑定冲突,当输入手机号已经被注册了,或者绑定了其他的微信,就会出现绑定失败的提示.

+ 1.这时可以进行把数据合并到当前账号(不推荐这种做法,因为数据比较重要)

+ 2.解除原账号绑定

插件推荐:vue 2.0 微信网页授权插件 https://github.com/raychenfj/v-wechat-auth
在这里插入图片描述
1.小程序的生命周期——App.js
App() 必须在 app.js 中注册，且不能注册多个。所以App（）方法在一个小程序中有且仅有一个。

App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。先上代码：

App({
  onLaunch: function () {
      console.log('App onLaunch');

  },

  onShow:function (){
     console.log('App onShow');

  },

  onHide:function(){
      console.log('App onHide');

  },
  onError:function(){
     console.log('App onError');

  },

  getPics: function() {
      return this.globalData.picList;
  },
  globalData:{
      picList: [] // 图片列表
  },

  globalName: 'tangdekun'

});

最外层的整个{ }就是一个object 参数。
通过表格的形式看App()中的object参数说明：
在这里插入图片描述
将原有的app.js中替换为上面的代码，首次打开小程序，可以在Log信息中看到以下Log信息,会看到onShow（）方法会执行两次

App onLaunch
App onShow()
App onShow()
注意：
1.不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
2.不要在 onLaunch 的时候调用 getCurrentPage()，此时 page 还没有生成。
3.通过 getApp() 获取实例之后，不要私自调用生命周期函数。

2.页面的生命周期

onLoad: 页面加载
    一个页面只会调用一次。
    接收页面参数   可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。

onShow: 页面显示
    每次打开页面都会调用一次。

onReady: 页面初次渲染完成
    一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。


onHide: 页面隐藏
    当navigateTo或底部tab切换时调用。

onUnload: 页面卸载
    当redirectTo或navigateBack的时候调用。

其中APP的生命周期和页面的生命周期是相互交叉的：举例：
我们有页面Test和Test1，我们在test.js,test1.js和App.js的生命周期方法中都打印log，代码如下：
test1.js


Page({
  data:{
    names:"tangdekun test1"
  },
  onLoad:function(options){
    // 生命周期函数--监听页面加载
    console.log("test1 onLoad");
  },
  onReady:function(){
    // 生命周期函数--监听页面初次渲染完成
    console.log("test1 onReady");
  },
  onShow:function(){
    // 生命周期函数--监听页面显示
   console.log("test1 onShow");
  },
  onHide:function(){
    // 生命周期函数--监听页面隐藏
     console.log("test1 onHide");
  },
  onUnload:function(){
    // 生命周期函数--监听页面卸载
     console.log("test1 onUnload");
  },
  onPullDownRefresh: function() {
    // 页面相关事件处理函数--监听用户下拉动作
     console.log("test1 onPullDownRefresh");
  },
  onReachBottom: function() {
    // 页面上拉触底事件的处理函数
     console.log("test1 onReachBottom");
  }

})


Page({
  data:{
    name:"test"
  },
  onLoad:function(options){
    // 生命周期函数--监听页面加载
    console.log("test onLoad");
  },
  onReady:function(){
    // 生命周期函数--监听页面初次渲染完成
    console.log("test onReady");
  },
  onShow:function(){
    // 生命周期函数--监听页面显示
   console.log("test onShow");
  },
  onHide:function(){
    // 生命周期函数--监听页面隐藏
     console.log("test onHide");
  },
  onUnload:function(){
    // 生命周期函数--监听页面卸载
     console.log("test onUnload");
  },
  onPullDownRefresh: function() {
    // 页面相关事件处理函数--监听用户下拉动作
     console.log("test onPullDownRefresh");
  },
  onReachBottom: function() {
    // 页面上拉触底事件的处理函数
     console.log("test onReachBottom");
  },
  onShareAppMessage: function() {
    // 用户点击右上角分享
    return {
      title: '分享页面', // 分享标题
      desc: '这是一个分享的测试', // 分享描述
      path: 'pages/waimai/waimai' // 分享路径
    }
  },
  navigateToPageB: function() {
    wx.navigateTo({
      url: '../../pages/pageB/pageB?id=3',
      success: function(res){

      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
  redirectToPageA : function(){
    wx.redirectTo({
      url: '../../pages/pageA/pageA?id=4',
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
 switchTabToTest1:function(){
   wx.switchTab({
     url: '../../pages/test1/test1',
     success: function(res){
       // success
     },
     fail: function() {
       // fail
     },
     complete: function() {
       // complete
     }
   })
 } 

})

微信

//定义全局变量 app.js
const app = getApp();
console.log(app.foo)
foo:"bar",
say(){
    cosnole.log("hello")
}

//想要跳转 tab 需要配置 open-type="switchTab"
<navigator class="" target="" url="" hover-class="navigator-hover" open-type="switchTab">

data(){
    mesage:1
}
<text>{{foo.addPosfix(mesage)}}</text>
//wxs 标签类似于 html中的script标签 可以定义一些行内脚本
<wxs module="foo">
//这里必须遵守common js 规范
    module.exports = {
        addPosfix:function(input){ 
            return input + '1'
        }
    }
</wxs>

//对于频繁需要切换显示的元素,不应该用wx:if
    <view wx:if={{isLoading}}>
      <text>
        loading
      </text>
    </view>
    <viewe wx:elif="{{isLoading}}">
      <text>
        loading
      </text>
    </viewe>
    <view wx:else={{isLoading}}>
      <text>
        loading
      </text>
    </view>

    //推荐用hidden
    <view hidden={{!isLoading}}>
      <text>
        loading
      </text>
    </view>
    <view hidden={{isLoading}}>
      <text>
        loading
      </text>
    </view>

<block wx:if={{isLoading}}>
    //只是一个包装元素,不会对页面结构造成任何影响
</block>
wx:for={{list}}
{{item.name}}
{{index}}//定义索引 直接写 跟vue有区别的
wx:for-item="s"//指定item名字
wx:for-index="i"//指定index名字
//key 写的属性的名字
wx:key="index"

bindtap="addclick" //事件 handle触摸
const list = this list;
//驱动视图更新 更新到页面上
this.setData({list:list})
//Page.prototype.setData()
 //setData 函数用于将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值。

自定义属性

    <view>
      <text>item 1</text>
      <button bindtap="removeHandle" data-id="1">remove</button>
    </view>
            Page({
      removeHandle (e) {
        console.log(e)
      }
    })

小程序是单向数据流  可以通过e.detail.value  
`<text>{{foo}}</text>

<input value="{{foo}}" bindinput="inputChangeHandle"/>`
    Page({
      data: {
        foo: 'hello wechat app'
      },
    
      inputChangeHandle (e) {
        // e.target -> 当前文本框
        console.log(e.detail.value)
    
        // 将界面上的数据再次同步回 数据源上
        // this.data.foo = e.detail.value
    
        // setData 
        // 1. 改变数据源
        // 2. 通知框架，数据源变了，需要重新渲染页面
        this.setData({ foo: e.detail.value })
      }
    })

    wxss 全屏750rpx
     
     "window": {
    "navigationBarBackgroundColor": "#037CFF",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "锁",
    "backgroundColor": "#bcc0c9",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false //全局刷新
  },
 "tabBar": {
    "color": "#999",
    "selectedColor": "#037CFF",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/apply/apply",
        "text": "申请",
        "iconPath": "pages/static/lcon/contact.png",
        "selectedIconPath": "pages/static/lcon/contact-active.png"
      },
      {
        "pagePath": "pages/list/list",
        "text": "门锁",
        "iconPath": "pages/static/lcon/home.png",
        "selectedIconPath": "pages/static/lcon/home-active.png"
      }
    ]
  },

小程序大小有限制可以images优化为单标签精简代码量等等!

    小程序发送请求如下: 
        // wx.request({
        //     url:'https://api.douban.com/v2/movie/coming_soon',
        //     header:{
        //         'Content-Type':'json'
        //     },
        //     success:function(result){
        //         console.log(result)
        //     }
        // })

    //小程序请求使用promise封装
    module.exports=(url,data)=>{
      return new Promise ((resolve,reject) => {
        wx.request({
          url:`https://locally.uieee.com/${url}`,
          data:data,
          success:resolve,
          fail:reject
        })
      })
    }
    const fetch =require('../../utils/fetch')
      fetch('slides').then(res=>{
       this.setData({slides:res.data})
   })

小程序跳转

利用小程序提供的 API 跳转：

 // 关闭所有页面，打开到应用内的某个页面。
 wx.reLaunch({
   url: 'page/home/home?user_id=111'
 })

        // 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
    // 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，但是 redirectTo 
    wx.navigateTo({
      url: 'page/home/home?user_id=111'
    })

        // 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
        
        wx.navigateTo({
          url: 'page/home/home?user_id=111'　　// 页面 A
        })
        wx.navigateTo({
          url: 'page/detail/detail?product_id=222'　　// 页面 B
        })
        // 跳转到页面 A
        wx.navigateBack({
          delta: 2
        })


        // 关闭当前页面，跳转到应用内的某个页面。
        wx.redirectTo({
          url: 'page/home/home?user_id=111'
        })

        // 跳转到tabBar页面（在app.json中注册过的tabBar页面），同时关闭其他非tabBar页面。
        wx.switchTab({
          url: 'page/index/index'
        })

        // 关闭所有页面，打开到应用内的某个页面。
        wx.reLanch({
          url: 'page/home/home?user_id=111'
        })

wxml 页面组件跳转（可以通过设置open-type属性指明页面跳转方式）：

        // navigator 组件默认的 open-type 为 navigate 
        <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
        // redirect 对应 API 中的 wx.redirect 方法
        <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
        // switchTab 对应 API 中的 wx.switchTab 方法
        <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
        // reLanch 对应 API 中的 wx.reLanch 方法
        <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">关闭所有页面，打开到应用内的某个页面</navigator>
        // navigateBack 对应 API 中的 wx.navigateBack 方法
        <navigator url="/page/index/index" open-type="navigateBack" hover-class="other-navigator-hover">关闭当前页面，返回上一级页面或多级页面</navigator>