微信小程序

微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

工具

1. 微信开发者工具
   下载链接：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
2. 微信小程序账号
   注册连接：https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN&token=

小程序优点

1. 即用即走
2. 在微信界面就能使用所有的服务
3. 不需要再安装一堆并非每天都会用到的应用
4. 节省手机内存
5. 它可以显示为一个单独的手机应用图标，访问很方便
6. 开发成本低，你可以轻松地发布自己的程序。

小程序页面

• index.js : 逻辑页面
• index.json : 配置页面
• index.wxml : 结构页面
• index.wxss : 样式页面

wxml与wxss的语法和html与css基本一致

小程序单位

• pt：为逻辑分辨率，与屏幕尺寸有关， 可以理解为长度单位；
• px：为物理分辨率，与屏幕尺寸无关，用于描述像素点的多少；
• ppi：每英寸包含的像素点

小程序单位换算关系
iphone6下1px=1rpx=0.5pt(rpx会在不同设备下转换、而px不会)；

导航栏配置

该文件为app.json

• pages : 配置页面路径
• window : 配置顶部导航栏
• tabbar : 配置底部导航栏

事件绑定

• bindtap 和 catchtap:catch 会阻止冒泡

  <button bindtap="newFn">你点我啊</button>
  <button catchtap="newFn">你点我啊</button>
  <button catch:tap="newFn">你点我啊</button>

• dataset 带参数

  <button data-me="3" catch:tap="newFn">你点我啊</button>

• 事件中布尔值

模板引用

提高模板复用性；

1. 定义模板

<template name="a">
 <view>我自己创建的模板</view>
</template>

引入模板

1. Import 可以在该文件中使用目标文件定义的template

  <import src="/pages/templates/a.wxml"/>
  <template is="a"></template>

2. include 可以将目标文件除了 template 外的整个代码引入，相当于是拷贝到 include 位置

  <include src="/pages/templates/a.wxml"/>

网络请求

    wx.request({
      url: 'http://localhost:8989/getList', //仅为示例，并非真实的接口地址
      // method:"post",
      success (res) { // 请求成功后执行！！！
        console.log(res.data)
      }
    })

练习——新闻列表

1. 获取新闻列表

  onLoad: function (options) {
    wx.request({
      url:"http://localhost:8989/getData",
      // 这里的this会受到ajax影响
      success:res=>{
        this.setData({
          newsData:res.data
        })
      } 
    })
  },

2. 上拉加载

  onReachBottom: function () {
    wx.request({
      url:"http://localhost:8989/getData",
      // 这里的this会受到ajax影响
      success:res=>{
        res.data.forEach(re => {
          this.data.newsData.push(re)
        })
        this.setData({
          newsData:this.data.newsData
        })
      } 
    })
  },

3. 新闻列表详细

// news/index.wxml
  <view class="myItem" wx:for="{{newsData}}" wx:key="key" bindtap="skip" data-id="{{item.id}}">
    ...
  </view>

...

// news/index.js
  skip(dataId){
    this.setData({
      myId : dataId.currentTarget.dataset.id
    })
    wx.navigateTo({
      url: `/pages/detail/index?id=${this.data.myId}`
    })
  },

...

// deatil/index.js
  onLoad: function (option) {
    console.log(option.id)
    wx.request({
      url: `http://localhost:8989/getDetail/${option.id}`,
      success:res=>{
        this.setData({
          detailData:res.data
        })
      }
    })
  },