微信小程序自定义组件

一：自定义组件

1.创建自定义组件：

1.1. 组件的使用：

1.定义组件：（js wxml . json. wxss ）四个文件组成。

 

    1.2声明组件：

     1.在需要引入组件的页面xxx.json文件中，在"usingComponents"里面注册。

2.使用组件：在需要引入的组件的页面wxml文件中；

添加组件标签：

 2.1：效果：

 2.3实现的效果图：

wxml：

<item title="支付" icon="/images/zhifu.png"></item>
<item title="相册" icon="/images/photo.png"></item>
<item title="支付"></item>

<item title="消息" icon="/images/icon02.png" badge="{{true}}" tip="3条信息"></item>
<item title="消息" icon="/images/icon02.png" badge="{{12}}" tip="12条未读"></item>
<item title="消息" icon="/images/icon02.png" showrslot="{{true}}">
<switch checked="true" slot="right"></switch>
</item>

<item>
<view slot="title">
  插槽title
</view>
</item>
<item title="新闻" icon="/images/icon02.png" url="/pages/yidian/yidian" open-type="switchTab">
</item>
<item title="首页" icon="/images/icon02.png" url="/pages/home/home" showrslot="{{true}}" itemclass="myitem"> 
<switch checked="true" slot="right"></switch>
</item>


<!-- <view class="title">
  自定义组件
</view>
<cell bind:cellclick="cellHd" title="特朗普搞笑男" num="{{5}}"></cell>
<cell  bind:cellclick="cellHd" title="普京大帝"></cell> -->


<!-- <cell cell-class="mycell">
<text slot="pre">🐳</text>
<text slot="next">💣</text>
<text>新馆肺炎加地</text>
<text>假的</text>
</cell>
<cell>
<text slot="next">🚓</text>
<text slot="pre">🔫</text>
<text>我要挣钱</text>
</cell> -->

wxss：

.title{
  line-height: 88rpx;
  background-color: #ccc;
  padding: 0 30rpx;
}
.cell{
  color: chartreuse;
}
.mycell{
  line-height: 120rpx !important;
  color: rgba(228, 13, 131, 0.267);
}

js内容：

// pages/com/com.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
  },
  cellHd(e){
    console.log(e);
    wx.showToast({
      //执行监听函数
      title: '你点击了'+e.detail,
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

引入的组件 json：

{
  "usingComponents": {
    "cell":"/components/cell/cell",
    "item":"/components/item/item"
  }
}

实现的效果图：

 二：自定义组件：Component：

1.生命周期：lifttimes：

 lifetimes:{
    attached(){
      // 获取系统信息
     var info =  wx.getSystemInfoSync();
     console.log(info);
    //  更新状态栏的高度
     this.setData({statusBarHeight:info.statusBarHeight})
    //  胶囊的位置
    const res = wx.getMenuButtonBoundingClientRect()
    console.log(res);
    // 标题栏可以使用的宽度（排除右侧胶囊的位置）
    this.setData({titleWidth:res.left});
    // 标题栏高度
    var barHeight = res.height+(res.top-info.statusBarHeight)*2;
    this.setData({barHeight});

    // 获取当前页
    var pages = getCurrentPages();
    console.log(pages);
    //更新页面的长度
    this.setData({pagesLen:pages.length})
    }
  },

2.组件的挂载：attch

  attached(){
      // 获取系统信息
     var info =  wx.getSystemInfoSync();
     console.log(info);
    //  更新状态栏的高度
     this.setData({statusBarHeight:info.statusBarHeight})
    //  胶囊的位置
    const res = wx.getMenuButtonBoundingClientRect()
    console.log(res);
    // 标题栏可以使用的宽度（排除右侧胶囊的位置）
    this.setData({titleWidth:res.left});
    // 标题栏高度
    var barHeight = res.height+(res.top-info.statusBarHeight)*2;
    this.setData({barHeight});

    // 获取当前页
    var pages = getCurrentPages();
    console.log(pages);
    //更新页面的长度
    this.setData({pagesLen:pages.length})
    }

3.data的数据：

 data: {
    statusBarHeight:20,
    barHeight:44,
    pagesLen:0,

  },

4.methods的方法：

methods: {
      goBack(){
        //返回一步
        wx.navigateBack()
      },
      goHome(){
        //有多少页面返回多少页面
        wx.navigateBack({
          // 返回历史的长度为总页面数
          delta: this.data.pagesLen,
        })
      }
  }

5.properties的属性（只读）

 properties: {
    "title":{
      type:"string",
      value:""
    },
    "color":{
      type:"string",
      value:"#fff"
    }

6.externalClasses的外部类：

  externalClasses:["itemclass"],

7.optipons的选项：

  options:{
    multipleSlots:true,
   
  },

7.1 multipleSlots的多个插槽：

 options:{
    //多个插槽
    multipleSlots:true,
   
  },

7.2  styleIsolation:"isolated" 组件的样式格式：

 //选项
  options:{
    // 样式隔离：apply-shared 父影响子 shared父子影响，isolated相互隔离
    // styleIsolation:"apply-shared"
    // styleIsolation:"shared"
    styleIsolation:"isolated",
    //允许多个插槽
    multipleSlots:true,
  },
  // 注意：在同一个节点上使用普通样式类和外部样式类时，两个类的优先级是未定义的，因此最好避免这种情况。

三：自定义导航栏：

1.

 wx.getMenuButtonBoundingClientRect()
胶囊的边界

2.

wx.getSystemInfoSync();
系统信息（状态栏的高度）

3.配置自定义状态栏：

 

实现的效果：

 四：登录功能：

  01：wx.login获取code(不固定)

 login(info={}){
    var that=this;
    wx.login({
      success:res=>{
        // res.code不是固定的
        console.log(res);
        // 发送code给后端，后去用户权限
        wx.request({
          url: 'https://www.520mg.com/start/wxloginb.php',
          data:{
            code:res.code,
            appid:"wx77997468d4cba590", // 实际工作中你能明文传输
            AppSecret:"b9af29113e7aa8c25c195f5ea5e9adbd", // 实际工作中不能明文传输（后端写死不用传）
            ...info, // 用户信息也传给后端
          },
          success:res=>{
            // 获取到用户信息
            console.log(res.data);
            // 用户信息存储起来
            wx.setStorageSync('userInfo', res.data);
            // 更新本地
            that.setData({userInfo:res.data});
          },
          fail(err){
            console.log(err);
          }
        })
      }
    })
  },

02 选做(getUserProfile)用户头像信息：

  getProfile(){
    var that=this;
    // 登录是需要用户授权（只让用户授权一次，也可以不授权，把授权信息发给后端，实现登录。再次获取用户信息就不需要用户授权了）
    wx.getUserProfile({
      desc: '用户头像信息',
      success:(result)=>{
        console.log(result);
        // 获取用户头像再登录
        that.login(result.userInfo);
      }
    })
  },

03：发送给后端：

01：可以不用去了解：

02：通过code与appid和Appsecret向微信的服务器换区用户唯一的openid

03：通过openid鉴定用户(给与权限)返回前端信息：

4.后端返回登录的状态，权限信息：

5；登录总结：

01：wx.login:获取code

02：wx.request 发送后端

03：前端存储后端返回登录状态

04：每次请求时候携带登录状态(封装在request.js)中

五：支付功能：

01；小程序支付，微信支付平台申请商家支付账号商户号与APPID进行绑定

02：用户下单：

（1）：订单信息
             wx.login 获取code 发给后端
        （1.1）  走一遍登录流程（确定是哪个用户购买）
       （1.2） 创建订单
       （1.3） 后端 发送订单订单信息-给微信的服务器（换取一个预支付id）
      （1.4） 后端通过签名生成支付信息返回给前端

03： 前端通过 wx.requestPayment (后端返回的支付信息) 发起支付

04：返回支付的结果。

完结......