微信小程序开发

优点

无需安装。
随处可见，随处使用。
使用完，无需写在卸载。

小程序的申请地址。

https://mp.weixin.qq.com

安装微信小程序工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

小程序的目录结构

app.js（小程序的主要逻辑）
app.json （小程序全局的公共配置）
app.wxss （小程序全局的公共样式表）

页面的覆盖掉全局的配置

新建页面的步骤

在pages目录下，右键新建目录，在当前新建的目录下，新建page框架。
在app.json的pages选项中添加新建页面的路径。

小程序的生命周期，以及页面的生命周期

*小程序生命周期：
https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

onLaunch全局只会触发一次。

*页面生命周期：
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("onload")
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log("onReady")

  },

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

    console.log("onShow")

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    onsole.log("onHide")
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    onsole.log("onUnload")
  },

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

  },

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

  },

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

  }
})

onLoad，onReady 只会渲染一次。

小程序的尺寸单位：“rpx”

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

flex 布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

数据绑定

mustache语法：{{}}
单向数据绑定

动态数据绑定

小程序的赋值通过this.setData(对象)

var apiData  = {
      textStr:"sever data",
      name:"jack"
    };
    
    this.setData(apiData);

获取data的值
this.data.key 值

小程序的条件渲染

wx:if为true显示元素，为false就不显示元素。

考试成绩
{{score}}
 及格
优秀
良好
不为空

小程序的列表渲染

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html

wx:for 绑定数组，wx:for-item值为当前变量名，wx:for-index当前下标的变量名。



    
    
    
    {{item.name}}

小程序事件绑定和事件交互

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

bind+事件方法
需要在js中写对应的方法


  {{changeText}}


--------------------------
data: {
      // textStr:"hello word11 "
    // score:90
    datalist:[],
    changeText:"hello  hundun"
  },
  changetext:function(){
    // console.log(1)
    this.setData({
      changeText:" ni hao ya "
    })
  },
  longtap:function(){
    console.log("longtap")
  },

小程序事件机制 catch和bind

bind 会用到冒泡的机制，catch会阻止事件的冒泡。
捕获阶段的bind 和catch


      点击

capture-bind:tap(捕获事件)
capture-catch:tap（捕获事件）


  点击

捕获事件先于绑定事件。从外层到内层捕获，从内层到外层绑定。

小程序的基础组件和常用组件

https://developers.weixin.qq.com/miniprogram/dev/component/icon.html

icon
progress
rich-text
text

 
   

  hahha

小程序的表单组件

https://developers.weixin.qq.com/miniprogram/dev/component/input.html

input
checkbox
checkbox-group
button
form

画布

https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

swiper

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

特殊的覆盖组件

https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html
https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html


    
    hhhh

小程序页面导航组件

https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
跳转到分类页面

小程序常用路由跳转

wx.navigateTo：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
wx.switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.reLaunch：关闭所有页面，打开到应用内的某个页面
wx.navigateBack：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
wx.redirectTo：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

 跳转到2级页面

 tapNext:function(){
    wx.redirectTo({
      url: '/pages/sort/sort',
      success:function(e){
        console.log(e)
      }
    })
  },

小程序的页面传参和取参。

 小程序的传递参数

onLoad: function (options) {
    console.log(options)
  },

小程序的底部导航栏

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar
https://developers.weixin.qq.com/miniprogram/dev/extended/weui/tabbar.html

app.json
"tabBar": {
    "color": "#000",
    "sselectedColor":"#0f0",
    "borderStyle":"black",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      
    },{
      "pagePath": "pages/sort/sort",
      "text": "分类"
    }]
  }

利用require加载js文件

var formate = require("../../utils/util.js")

onLoad:function(options){
var  date  = new  Date()
    console.log(date)

    var d = formate.formatTime(date)
    console.log(d)
    }

WXML的模版编写和引入

wxs模块引用。

https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html
// 创建wxs文件。

var textStr = "hello world"

var num  =  function(num1,num2){
  return num1+num2;
}

module.exports = {
  message:textStr,
  add:num
}
//引入wxs



{{test.message}}


{{test.add(1,11)}}