跨端小程序
微信小程序
整个小程序框架系统分为两部分:逻辑层(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 + 小程序组件 + 条件编译(跨端)。
页面管理
微信小程序页面需要在app.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
内置组件
API
注意
uniapp 异步API通常的回调风格,但是只要你不传入 success、fail、complete 等 callback 参数,那么API返回值就会转换成Promise。
uni.$on是全局级别的,跨页面跨组件,尽量减少使用,并且页面销毁时(onUnload)记得销毁事件监听器(uni.$off)
uni.request() Post请求默认的编码格式是
application/json,可以通过改变请求头'content-type’字段来改变。
最后更新于