微信小程序 | 易学教程

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

工具

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

小程序优点

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

小程序页面

在这里插入图片描述

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>

事件中布尔值

模板引用

提高模板复用性；

定义模板

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

引入模板

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

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

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

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

网络请求

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

练习——新闻列表

获取新闻列表

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

上拉加载

  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
        })
      } 
    })
  },

新闻列表详细

// 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
        })
      }
    })
  },

来源：oschina

链接：https://my.oschina.net/u/4274555/blog/4311368

标签

微信小程序

ppi

wechat

javascript