跨端小程序

微信小程序

整个小程序框架系统分为两部分:逻辑层(App Service)和 视图层(View)。小程序提供了自己的视图层描述语言 WXMLWXSS,以及基于 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 + 小程序组件 + 条件编译(跨端)

页面管理

微信小程序页面需要在app.json中注册,并且可以设置一些样式。

pages.json

微信小程序自身维护了一个页面栈,并提供一些API来供开发者调用页面栈。

对于路由的触发方式以及页面生命周期函数如下:

Untitled Database

生命周期

页面生命周期

小程序生命周期

挂起阶段需要注意

  • 大部分小程序API在挂起阶段会失效

  • websocket连接在挂起阶段会被强制中断

避免挂起

  • onShow/onHide

  • 一些特定的小程序API

应用级生命周期

微信小程序开发者工具

  • 模拟器

  • 编辑器

  • 调试器

    • 元素

    • 控制台

    • 源码

    • 网络

    • 性能

    • 内存(内存泄漏)

    • 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%:平台名称

Untitled Database

%PLATFORM% 可取值如下:

Untitled Database

支持的文件

  • .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

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。

  • uni.$on是全局级别的,跨页面跨组件,尽量减少使用,并且页面销毁时(onUnload)记得销毁事件监听器(uni.$off)

  • uni.request() Post请求默认的编码格式是application/json,可以通过改变请求头'content-type’ 字段来改变。

最后更新于