微信小程序

全局json配置

entryPagePath：小程序默认启动路径
page：配置页面路径（若未配置entryPagePath，默认第一项）
window：设置状态栏、导航条、标题、窗口背景颜色
tabBar：底部/顶部的tab栏

{
  "pages":[
    "pages/main/index",
    "pages/user/index"
  ],
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#d81e06",
    "navigationBarTitleText": "小猪皮",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh":true
  },
  "tabBar": {
    "color": "#000000",
    "selectedColor": "#d81e06",
    "list": [{
      "pagePath": "pages/main/index",
      "text": "首页",
      "iconPath": "icons/main.png",
      "selectedIconPath": "icons_active/main.png"
    },{
      "pagePath": "pages/user/index",
      "text": "个人中心",
      "iconPath": "icons/user.png",
      "selectedIconPath": "icons_active/user.png"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

页面配置

{
  "usingComponents": {},
  "navigationBarTitleText": "消息",
  "navigationBarTextStyle": "black"
}

wxml模板

解析数据<view>{{name}}</view>
组件属性<view id="card-{{id}}"></view>

<!-- 三元运算 -->
<view hidden="{{flag ? true : false}}"> hidden </view>
<!-- 算数运算 -->
<view>{{a + b}} </view>
<!-- 逻辑判断 -->
<view wx:if="{{day==1}}">1</view>
<view wx:elif="{{day==2}}">2</view>
<view wx:else>3</view>
<!-- 循环 -->
<view wx:for="{{arr}}" wx:key="index">
  索引{{index}}索引对应的数据{{item}}
</view>
<block wx:for="{{arr}}" wx:key="index" wx:for-index="id">
  <view>序号：{{index}} -- 地点：{{item.city}} -- 名称：{{item.name}}</view>
</block>
<!-- 循环十次 -->
<view wx:for="{{10}}"> 我 是 小猪皮</view>
<!-- 修改改index与item -->
<view wx:for="{{arr}}" wx:for-index="i" wx:for-item="data">
  索引{{i}}索引对应的数据{{data.name}}
</view>

页面

Page({
  data:{
    // 数据初始化
  },
  onLoad:function(){
    // 监听页面加载
  },
  onReady:function(){
    // 监听页面初次渲染完成
  },
  onShow:function(){
    // 监听页面显示
  },
  onHide:function(){
    // 监听页面隐藏
  },
  onUnload:function(){
    // 监听页面卸载
  },
  onPullDownRefresh:function(){
    // 监听用户下拉动作
  },
  onReachBottom:function(){
    // 页面上拉触底
  }
})

事件

1.touchstart 触摸动作开始
2.touchmouve 触摸后移动
3.touchcancle 触摸动作被打断
4.touchend 触摸动作结束
5.tap 触摸后马上离开

<view bindtap="clickEvent" data-id="19970920" data-name="xzp">点击</view>

Page({
  clickEvent:function(e){
    console.log(e.currentTarget.dataset.name)// xzp
    console.log('点击事件')
  }
})

修改data中的数据setData

Page({
  clickEvent:function(e){
    this.setData({
      name:'yyy'
    })
  }
})

路由用法（页面跳转）

// tab页面跳转，不携带参数
clickUrl:function(){
  wx.switchTab({
    url:"/pages/user/index"
  }) 
}
// tab页面跳转，携带参数
wx.reLaunch({
  url:"/pages/user/index?id=970716",
  success:res=>{
    // 跳转成功回调
  }
})
// 返回上一级页面
navBackClick:function(){
  wx.navigateBack();
}

网络请求

Page({
  data:{},
  onLoad:function(){
    wx.request({
      url:'xzp.action',
      data:{},
      success(res){
        // 成功回调
      }
    })
  }
})