wx——微信小程序与 web 区别

微信小程序官网

与 web 开发区别

web

结构	样式	行为
html（div、span 等）	css	js（ECMAScript、BOM、DOM、全局对象 window）

微信小程序

结构	样式	行为	配置
wxml（不是html，而是遵循xml）	wxss（新增1、rpx（响应式像素 2rpx=1px，推荐使用，除了 font-size）单位；2、样式导入@import "*.wxcss"）	js（ECMAScript、全局对象 wx、无BOM和DOM的概念）	*.json

wxml 与 html：

div	span	img	a
view	text	image	navigator

微信开发者工具注意点

• image 标签，需要自己设置宽高（因为默认会给图片定义宽高），若不希望变形，则设置缩放模式 mode='aspectFill'
• json 配置窗口行为样式
• 这里新添的路由，会在对应文件下新建结构目录及初始内容
  
• 属性设置用下面方式，若无花括号直接 false ，会默认转换为 true
  
• 生命周期函数

app.js（顺序：onLaunch > onShow > onHide）

App({
  // 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
  onLaunch: function () {},
  
  // 当小程序启动，或从后台进入前台显示，会触发 onShow
  onShow: function (options) {},
  
  // 当小程序从前台进入后台，会触发 onHide
  onHide: function () {},
  
  // 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
  onError: function (msg) {}
})

page.js（顺序：onLoad > onShow > onReady > onUnload | onHide > onShow）

Page({
  // 页面的初始数据
  data: {},

  // 生命周期函数--监听页面加载
  onLoad: function (options) {},

  // 生命周期函数--监听页面初次渲染完成
  onReady: function () {},

  // 生命周期函数--监听页面显示
  onShow: function () {},

  // 生命周期函数--监听页面隐藏
  onHide: function () {},

  // 生命周期函数--监听页面卸载
  onUnload: function () {},

  // 页面相关事件处理函数--监听用户下拉动作
  onPullDownRefresh: function () {},

  // 页面上拉触底事件的处理函数
  onReachBottom: function () {},

  // 用户点击右上角分享
  onShareAppMessage: function () {}
})

框架：

• mpvue（美团）
• wepy（腾讯）