微信小程序基础知识的扫盲

感谢

这两天找了一篇小程序总结看，下面是自己的笔记。贴出原文，对作者表示感谢，侵权删。

小程序的框架原理

视图层+逻辑层：小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

小程序拥有接近原生APP的体验，不是真正的 ‘无需下载’ 而是因为体积小、网速块用户感知不到下载过程，可称 ‘无感下载’ ；

双线程模型，逻辑层和渲染层分别在不同的线程中，通过JSBrige进行通信；围绕着宿主应用微信，实现了更为强大的生态，提供更为便捷的服务。

小程序为什么不能使用div标签

WXML不是原生的HTML，view标签代替div，image标签代替img等

小程序js运行环境和浏览器js运行环境

小程序

开发着工具：VM.js 安卓环境：V8 IOS环境：jsCore
浏览器

V8

视图层可概况为使用WebView进行渲染。

开发小程序的前置工作

注册一个小程序，使用一个没有注册过公众号/小程序的邮箱
下载最新版的开发者工具
添加开发者
用开发者工具创建项目，选择模板

小程序的文件类型

.WXML：标签
.WXSS：样式
.json：配置
.js：逻辑

新增一个页面

在项目的根目录下app.json文件，配置page字段，则自动生成四个文件；

{
  "page": [
    "pages/test/index"
  ]
}

设置底部tabbar栏

在项目根目录下app.json文件，配置tabBar字段

{
  "tabBar": {
    "color": "",
    "selectedColor": "",
    "list": [
      {
        "pagePath": "",
        "text": "",
        "iconPath": "",
        "selectedIconPath": ""
      },
      {
        "pagePath": "",
        "text": "",
        "iconPath": "",
        "selectedIconPath": ""
      }
    ]
  }
}

特有的css单位rpx

rpx：自适应像素，规定屏幕宽度为750rpx; 在iphone6上，屏幕尺寸是375px，则换算单位是：750rpx = 375px => 2rpx = 1px；设计时一般以iphone6尺寸设计；

生命周期函数

onLoad: 页面加载完毕时执行
onReady: 页面初始渲染完成时执行
onShow: 页面显示时执行
onHide: 页面隐藏时执行

双向数据绑定

使用 this.setData() 方法触发视图更新；

消息提示框

// 显示
wx.showToast({
  title: '',
  icon: 'success',
  duration: 1000
})
// 隐藏
wx.hideToast()

模态对话框

wx.showModal({
  title: '',
  content: '',
  success(res) {
    
  }
})

页面间传递参数

在跳转URL后面加上传参

// a页面
wx.navigateTo({
  url: '../testpage/index?customParams=' + id,
  success(){}
})

// b页面
onLoad: function (params) {
  const id = params.id
}

借助 app.globalData 定义全局变量

// a页面
app.globalData.userInfo = { name: '1', id: '1' }

// b页面
const app = getApp();
const name = app.globalData.userInfo.name

绑定事件

绑定点击tap事件，有bindtap、catchtap两种；bindtap是运行事件冒泡、catchtap是不允许事件冒泡；

// wxml页面
<view bindtap="tapFun">按钮</view>

// js页面
page({
  tapFun: function(e) {
    console.log(e.currentTarget)
  }
})

页面跳转的方式有哪些

wx.navigateTo()：保留当前页面，跳转到应用内的某个页面，但是不能跳转tabbar页面，最多10层；
wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面，不能跳转tabbar页面；
wx.switchTab()：跳转tabbar页面，关闭其他tabbar页面；
wx.navigateBack()：关闭当前页面，返回上一页面；
wx.reLaunch()：关闭所有页面，打开应用内某个页面；

条件渲染、循环渲染

// 条件
<view wx:if={{condition}}>text</view>

// 循环
<view wx:for={{list}} wx:key={{index}} wx:for-item={{item}}>{{item.name}}</view>

请求服务端数据

在小程序后台管理->开发->开发管理->开发设置->服务器域名->request合法域名配置服务端域名，使用wx.request()方法调用；

wx.request({
  url: '',
  header: {},
  data: {},
  timeout: 2000,
  success: () => {},
  fail: () => {}
})

上传文件/图片

在小程序后台管理->开发->开发管理->开发设置->服务器域名-> uploadFile合法域名配置服务器域名，使用wx.uploadFile()、wx.chooseImage()

wx.uploadFile({
  url: '',
  filePath: '',
  name: '',
  formData: {},
  success: () => {},
  fail: () => {},
  complete: () => {}
})

播放音频

const audioContent = wx.createInnerAudioContext({
  useWebAudioImplement: true
})
audioContent.src = '';
audioContent.play();

下拉刷新，触底更新

在json文件中设置允许下拉刷新 enablePullDownRefresh: true
在js文件中添加下拉刷新的回调，一般用于刷新页面请求：

onPullDownRefresh: function() {
  //...
  
  wx.stopPullDownRefresh()
}

在js文件中添加onReachBottom的回调，一般用于翻页

onReachBottom: function() {
  
}

引入npm 包

在小程序根目录下安装

npm install moment -S
在微信开发者工具中，工具-> 执行构建npm

云数据库

云数据库是一个NoSQL数据库，每一张表就是一个集合；

// 创建云数据库
const db = wx.cloud.database();
// 引入集合
const list = db.collection('list');
// 查集合中的某一项内容详情
const { data } = list.where({
  id: 1
}).field({
  _id: true,
  name: true,
  price: true,
  title: true,
  time: true
}).get()

羊了个羊的，这些微信小程序知识点你不快速过一遍吗？