微信小程序开发

配置

app.json

{
  "pages": [
    "pages/index/index",//内容
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "标题",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true   //开启下拉刷新
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "useExtendedLib": {    //导入weui
    "kbone": true,
    "weui": true
  },
  "tabBar": {                                //
    "borderStyle": "black",
    "color": "#707070",
    "selectedColor": "#af191f",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "img/Navigation1.png",
        "selectedIconPath": "img/Navigation1_1.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/match/match",
        "iconPath": "img/Navigation2.png",
        "selectedIconPath": "img/Navigation2_2.png",
        "text": "比赛"
      },
    ]
  }
}

模板

模板介绍

只有wxml和wxss的两个类型的模板

模板创建

wxml文件

	<template name="模板名字">
	{{title}}
	</template>

wxss文件 正常的css文件

模板使用

//wxml引入相应位置文件
//data引入变量
<import src="../../templates/steps/steps.wxml" />
<template is="模板名字" data="{{...{title:'标题'}}}"></template>

//wxss引入相应位置文件
@import "../../templates/steps/steps.wxss";

组件

组件介绍

Component

Component({

  behaviors: [],

  properties: {
    myProperty: { // 属性名
      type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '', // 属性初始值（可选），如果未指定则会根据类型选择一个
      observer: function (newVal, oldVal) {
          this._propertyChange(newVal, oldVal);
       } // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
      
    },
    myProperty2: String // 简化的定义方式
  },
  data: {
    A: [{
      B: 'init data.A[0].B'
    }]
  }, // 私有数据，可用于模版渲染

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready: function() { },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () { },
  },

  methods: {
    onMyButtonTap: function () {
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
        myProperty: 'Test'
      })
    },
    _myPrivateMethod: function () {
      // 内部方法建议以下划线开头
      this.replaceDataOnPath(['A', 0, 'B'], 'myPrivateData') // 这里将 data.A[0].B 设为 'myPrivateData'
      this.applyDataUpdates()
    },
    _propertyChange: function (newVal, oldVal) {
        console.log(newVal);
        console.log(oldVal);
    }
  }

})

js属性

项目	Value	使用
properties	引入模板后传过来的属性
data	模板私有变量
methods	函数方法

this属性

生命周期

组件传数据给页面

Component({
  properties: {}
  methods: {
    // 子组件触发自定义事件
    ontap () {
    // 所有要带到主页面的数据，都装在eventDetail里面
    var eventDetail = {
            name:'sssssssss',
            test:[1,2,3]
    }
    // 触发事件的选项 bubbles是否冒泡，composed是否可穿越组件边界，capturePhase 是否有捕获阶段
    var eventOption = {
            composed: true
    }
    this.triggerEvent('myevent', eventDetail, eventOption)
    }
  }
})

触发的事件包括：

组件创建

在小程序开发工具中右键创建component

• 加入相应js代码

Component({
  properties: {
    value: {
      type: String,
      value: ""
    },
    default: {
      type: String,
      value: ""
    }
  },
  data: {
    time: [
      Array.from(new Array(20), (v, k) => (new Date().getFullYear() - 10 + k) + '年'),
      Array.from(new Array(12), (v, k) => k + 1 + '月'),
      Array.from(new Array(31), (v, k) => k + 1 + '日'),
      Array.from(new Array(61), (v, k) => k),
      Array.from(new Array(61), (v, k) => k),
    ],
    key: [
      10,
      new Date().getMonth(),
      new Date().getDate() - 1,
      new Date().getHours(),
      new Date().getMinutes(),
    ]
  },
  methods: {
    comPickerTime(e) {
      var time = this.data.time
      var key = e.detail.value
      this.setData({
        value: time[0][key[0]].slice(0, 4) + '-' + (key[1] < 10 ? '0' + (key[1]+ 1) : key[1]+ 1) + '-' + (key[2] + 1) + ' ' + (key[3] < 10 ? '0' + key[3] : key[3]) + ':' + (key[4] < 10 ? '0' + key[4] : key[4])
      })
      this.triggerEvent('change', {
        value: this.properties.value
      }, {
        composed: true
      })
    },
    startData(){//初始化数据
      var key = this.data.key
      var time = this.data.time
      var value = this.properties.value
      if (value.length > 0) {
        let setTime = new Date(value).getTime()
        let year=new Date(value).getFullYear()
        time[0] = Array.from(new Array(20), (v, k) => (year - 10 + k) + '年')
        key = [
          10,
          new Date(setTime).getMonth(),
          new Date(setTime).getDate() - 1,
          new Date(setTime).getHours(),
          new Date(setTime).getMinutes(),
        ]
      }
      this.setData({
        key,
        time
      })
    }
  },
  attached() {
   
  }
})

• wxml文件

<picker mode="multiSelector" value="{{key}}" range="{{time}}" bindchange="comPickerTime" bindtap="startData">
	<view class="weui-select" style="{{value?'':'color:#666'}}">
		{{value || default}}
	</view>
</picker>

组件使用

//在pages页面下json引用相应文件
{
  "usingComponents": {
    "picker_time": "/component/picker_time/picker_time"
  }
}

//在pages页面下wxml引用相应文件
<picker_time bind:change="bindPlatStart" value="{{play_start_time}}"></picker_time>

npm应用

• 用npm安装微信相关的包

npm install vant-weapp

• 构建npm
• 调用组件 在页面的json文件中设置

{
	"usingComponents": {
		"mp-cell": "/miniprogram_npm/vant-weapp/cell/cell",
	}
}

资料链接

• 微信小程序自定义组件详解.
• 微信小程序（页面生命周期）.