跨端小程序

微信小程序

整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 WXML和 WXSS，以及基于 JavaScript的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。
原生微信小程序的语法和vue非常相似：
Page({
  data: { },
  onLoad: function (options) { },
  onReady: function () {},
  onShow: function () { },
  onHide: function () {},
  onUnload: function () {},
  onPullDownRefresh: function () { },
  onReachBottom: function () { },
  onShareAppMessage: function () { }
})
<view>
	<view>123</view>
	<button bindtap="{{a}}">click</button>
</view>
.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
}
.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
}
.text-area {
		display: flex;
		justify-content: center;
}
.title {
		font-size: 36rpx;
		color: #8f8f94;
}

跨端小程序

uniapp是一款基于vue的跨端小程序开发框架，支持微信小程序、QQ小程序、支付宝小程序和APP。
uni-app简单来说是 vue + 小程序api + 小程序组件 + 条件编译(跨端)。
notion image

页面管理

微信小程序页面需要在app.json中注册，并且可以设置一些样式。
{
	"pages": [{
		"path": "pages/component/index",
		"style": {
			"navigationBarTitleText": "组件"
		}
	}, {
		"path": "pages/API/index",
		"style": {
			"navigationBarTitleText": "接口"
		}
	}, {
		"path": "pages/component/view/index",
		"style": {
			"navigationBarTitleText": "view"
		}
	}],
	"condition": { //模式配置，仅开发期间生效
		"current": 0, //当前激活的模式（list 的索引项）
		"list": [{
			"name": "test", //模式名称
			"path": "pages/component/view/index" //启动页面，必选
		}]
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "演示",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"usingComponents":{
			"collapse-tree-item":"/components/collapse-tree-item"
		},
		"renderingMode": "seperated", // 仅微信小程序，webrtc 无法正常时尝试强制关闭同层渲染
		"pageOrientation": "portrait", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
		"rpxCalcMaxDeviceWidth": 960,
		"rpxCalcBaseDeviceWidth": 375,
		"rpxCalcIncludeWidth": 750
	},
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"height": "50px",
		"fontSize": "10px",
		"iconWidth": "24px",
		"spacing": "3px",
    "iconfontSrc":"static/iconfont.ttf", // app tabbar 字体.ttf文件路径 app 3.4.4+
		"list": [{
			"pagePath": "pages/component/index",
			"iconPath": "static/image/icon_component.png",
			"selectedIconPath": "static/image/icon_component_HL.png",
			"text": "组件",
      "iconfont": { // 优先级高于 iconPath，该属性依赖 tabbar 根节点的 iconfontSrc
        "text": "\ue102",
        "selectedText": "\ue103",
        "fontSize": "17px",
        "color": "#000000",
        "selectedColor": "#0000ff"
      }
		}, {
			"pagePath": "pages/API/index",
			"iconPath": "static/image/icon_API.png",
			"selectedIconPath": "static/image/icon_API_HL.png",
			"text": "接口"
		}],
		"midButton": {
			"width": "80px",
			"height": "50px",
			"text": "文字",
			"iconPath": "static/image/midButton_iconPath.png",
			"iconWidth": "24px",
			"backgroundImage": "static/image/midButton_backgroundImage.png"
		}
	},
}
pages.json
微信小程序自身维护了一个页面栈，并提供一些API来供开发者调用页面栈。
对于路由的触发方式以及页面生命周期函数如下：

生命周期

页面生命周期

notion image

小程序生命周期

notion image
挂起阶段需要注意
  • 大部分小程序API在挂起阶段会失效
  • websocket连接在挂起阶段会被强制中断
  • …
避免挂起
  • onShow/onHide
  • 一些特定的小程序API
 

微信小程序开发者工具

notion image
 
  • 模拟器
  • 编辑器
  • 调试器
    • 元素
    • 控制台
    • 源码
    • 网络
    • 性能
    • 内存（内存泄漏）
    • AppData （页面的变量）
    • Storage（类似浏览器的Storage）
    • Mock
    • 体验评分（类似LightHouse）
  • 编译模式
  • 预览
  • 真机调试
  • 项目设置
 

实现多端

uniapp实现多端的方法： 封装API + 条件编译。
uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。
但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
  • *写法：**以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。
  • #ifdef：if defined 仅在某平台存在
  • #ifndef：if not defined 除了某平台均存在
  • %PLATFORM%：平台名称
%PLATFORM% 可取值如下：
支持的文件
  • .vue
  • .js
  • .css
  • pages.json
  • 各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug
 

页面通讯

监听器
  • uni.$emit(eventName,OBJECT)
  • uni.$on(eventName,callback)
  • uni.$once(eventName,callback)
  • uni.$off([eventName, callback])
URL queryString
details(id) {
    uni.navigateTo({
        url: "details?id="+id,
    });
},

onLoad(option) {
    console.log(option.id)
},
uni-app官网 (dcloud.io)

内置组件

uni-app官网 (dcloud.io)
视图容器 | 微信开放文档 (qq.com)

API

基础 | 微信开放文档 (qq.com)
uni-app官网 (dcloud.io)
 

注意

  • uniapp 异步API通常的回调风格，但是只要你不传入 success、fail、complete 等 callback 参数，那么API返回值就会转换成Promise。
 // 正常使用
 const task = uni.connectSocket(
  success(res){
   console.log(res)
  }
 )

 // Promise 化
 uni.connectSocket().then(res => {
   // 此处即为正常使用时 success 回调的 res
   // uni.connectSocket() 正常使用时是会返回 task 对象的，如果想获取 task ，则不要使用 Promise 化
   console.log(res)
 })
  • uni.$on是全局级别的，跨页面跨组件，尽量减少使用，并且页面销毁时(onUnload)记得销毁事件监听器(uni.$off)
  • uni.request() Post请求默认的编码格式是application/json，可以通过改变请求头'content-type’ 字段来改变。
uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});