微信小程序开发

调试器

断点调试

设置好断点，点击编译，会执行断点，查看Watch可以查看数据。

Stroage

缓存信息

AppData

页面信息

打印日志

console.log("我是log")

结构

.js配置页面入口，wxml配置页面UI，.json页面的配置文件，wxss类似于css样式。内部的.json和wxss会覆盖外面的。

app.json配置页面

"pages":[
    "pages/index/index",
    "pages/logs/logs"
]

app.js定义了页面的入口

App({
  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) { 
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
  }
})

index.js自己页面的配置

Page({

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

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

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

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

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

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

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

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

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

index.wxml页面的布局文件

视图和渲染

组件

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

在wxml中

<text>这里是文本内容</text>

<button type="default" hover-class="other-button-hover">
  default
</button>

<button type="primary">
  primary
</button>

数据绑定

在wxml中

<button type="primary">
  {{btnText}}
</button>

<text>{{text}}</text>

在js中

data: {
    text:"这里是text内容",
    btnText:"这里是btn内容"
},

动态绑定

wxml中

<text>{{text}}</text>

<button type="primary" bindtap="btnClick">
  点击
</button>

js中，在page下

btnClick : function(){
  this.setData({
    text:"这是新的内容"
  })
}

两种渲染标签

if、else

wxml中

<view wx:if="{{show}}">
  {{text}} 1
</view>

<view wx:else="{{show}}">
  {{text}} 2
</view>

js中

var isShow = this.data.show;
  this.setData({
    text: "这是新的内容", show : !isShow
})

for

wxml中

<view wx:for="{{news}}" wx:for-item="items" wx:for-index="ix" >
  {{ix}}-{{items}}
</view>

js中

var newsdata = this.data.news;
newsdata.shift();
this.setData({
  text: "这是新的内容", show: !isShow,news:newsdata
})

模板使用

wxml中引入公共的wxml

<include src="../templates/header" />

事件

点击tab、长按longtab、触摸（touchstart,touchend,touchmove,touchcancle）等

事件冒泡：点击子view，它本身和他的所有父view都会相应，包括点击，长按，触摸事件。其他都是非冒泡事件。

事件的绑定：bind绑定和catch绑定。比如点击事件bindtap和catchtab，区别就是bindtap会事件冒泡，catchtap不会事件冒泡。

事件的对象：类型type，时间戳timeStamp，事件源组件target，当前组件currentTarget，触摸点数touches，dataset等，代码：

btnClick : function(event){
    console.log(event);
})

案例

点击按钮查询，查询输入框中内容

遇到的问题

https://www.cnblogs.com/wholeworld/p/8361577.html

做好后的效果图

app.json中配置页面，app.js中设置网路，代码

getNameInfo: function (name,cb){
    wx.request({
      url: 'https://shanghaicity.openservice.kankanews.com/citizen/repeat?name='+name, //接口地址
      data: {
        x: '',
        y: ''
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        //console.log(res.data)
        cb(res.data)
      }
    })
}

页面wxml

<view class="container">
    <input placeholder="请输入您的姓名" bindinput="nameInput"></input>
    <button type="primary" bindtap="btnSearch">查询</button>
    <text wx:if="{{isShow}}">查询到上海市姓名是{{resultInfo.name}}的人数为{{resultInfo.count}}人</text>
</view>

页面wxss

input{
  border: 1px solid red;
  width: 90%;
  margin: 5%;
  padding: 5px;
}
text{
  margin-top: 20px;
}

页面js

var app = getApp()
Page({
  /*** 页面的初始数据 */
  data: {
      myName:null,
      resultInfo:null,
      isShow:false
  },

  btnSearch : function(){
    var thispage = this;
    //console.log(this.data.myName)
    app.getNameInfo(this.data.myName, function (data) {//结果：{count: 0, name: "萧何"}
      //console.log(data)
      thispage.setData({resultInfo : data})
      thispage.setData({ isShow: true });
    });
  },

  nameInput : function(e){
    this.setData({myName:e.detail.value})
  }
})

配置

页面配置，全局配置，tabBar配置，网络超时配置，debug开启配置

全局配置和页面配置

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

页面json中配置window可以覆盖全局window配置。

tabBar配置

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

比如

{
  "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [
      {
        "pagePath": "page/component/index",
        "text": "组件",
        "iconPath":"images/icon1.png",
        "selectedIconPath":"images/icon2.png"
      },
      {
        "pagePath": "page/API/index",
        "text": "接口",
        "iconPath":"images/icon3.png",
        "selectedIconPath":"images/icon4.png"
      }
    ]
  },
  "usingComponents": {}
}

在app.json中配置debug

"debug":true