微信小程序CSDGD的博客-

微信小程序，小程序的一种，英文名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: 'https://localhost:8989/getList', //仅为示例，并非真实的接口地址 // method:"post", success (res) { // 请求成功后执行！！！         console.log(res.data) } }) 

练习——新闻列表

1. 获取新闻列表

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

2. 上拉加载

  onReachBottom: function () {     wx.request({       url:"https://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: `https://localhost:8989/getDetail/${option.id}`,       success:res=>{ this.setData({           detailData:res.data         }) } }) },