bug
- 固定时间转时间戳 new Date(2020-12-20 12:10:10).getTime() 在ios手机获取不到时间戳,
需要采用 new Date(2020,12,20,12,10,10).getTime()
注意事项(重难点)
- 需要下载 HBuildX 和微信开发工具
- 可运行在浏览器(H5),微信开发工具(小程序),手机或模拟器(app)
微信运行
- 新建 uniapp 项目后,点击运行在微信编辑器的时候,若是第一次,会弹窗输入微信编辑器安装包所在的文件目录
- 如果在微信编辑器运行失败,需要编辑器——设置——安全设置——开启服务器端口
- 小程序上传后,需要配置安全域名并且在微信开放平台绑定小程序才能获取uniID登录
手机运行
- 第一次连接手机,设置——关于手机——连续点击版本号激活开发者模式
- 设置——系统和更新——开发人员选项——USB调试开启——信任当前计算机
- 重新插上连接线——运行在手机——运行后会在手机安装调试工具,点击手机上的工具即可打开
- 如果使用第三方需要打自定义调试基座运行,更接近真机
安卓证书
- 不同项目可以使用一个安卓证书,但是包名不能重复,否则手机安装不上第二个app
微信登录和支付
- 微信登录和支付需要配置appid和ios通用链接
- 申请需要咋微信开放平台——管理中心——创建应用——填写资料(需要一个简单官网,一个页面即可有名称就行,包名和应用签名)——等待审核
- 获取应用签名:安卓证书——打包app——安装在手机——下载微信工具安装在手机(GenSignature)——输入app包名——即可获取
生命周期
建议使用onLoad代替created 调接口;使用onReady代替mounted
- 在任何页面均可以使用vue生命周期,组件中只能使用vue生命周期,页面中推荐小程序的生命周期
- 监听app卸载可以在app.vue文件使用beforeDestroy()
- tabbar页面没有onUnload()卸载页面的方法,所以app打开之后主页面只会执行一次onLoad,只会执行onShow和onHide,所以如果需要刷新页面,在onShow里初始化或者下拉刷新,如果需要传参,只能使用uni.$emit()
bug
- 如果不用自定义基座正常,用自定义基座出问题,就是key有问题(安卓可以申请sha1问题)
基础语法
- 单位 750rpx
- 全局样式引入:app.vue文件style标签中加入 @import url(相对路径) 或 @import “相对路径”
- 根目录文件 /static 或者@/static
- js文件引入:绝对或相对路径,例如:import add from ‘@/common/add.js’
- js文件不支持使用/开头的方式引入
- css引入绝对和相对均可 @import url(’/common/uni.css’); 或 @import url(’@/common/uni.css’);
- 小程序背景图不支持本地图片
- 可以使用less或sass,插件安装即可
- less声明变量 @color:red; sass 声明变量 $color:red;
重要语法
- data,methods,computed,components语法都和vue相同![生命周期和路由和小程序相同]
- 全局组件注册使用以及父子组件传值和vue相同
- 动态类 :class="{ active: isActive }"
- 动态样式 :style="{ color: activeColor, fontSize: fontSize + ‘px’ }"
app自定义头部右边内容
//
{
"path": "pages/home/mem-detail",
"style": {
"navigationBarTitleText": "会员详情",
"app-plus": {
"titleNView": {
"buttons": [ //原生标题栏按钮配置,
{
"text": "保存", //
"color":"#0072FF",
"fontSize":"14px",
"width":"40px"
}
]
} //禁用原生导航栏
}
}
},
//vue页面
methods:{
onLoad(options){
this.id = options.id;
},
},
onNavigationBarButtonTap(){ //与methods平级
console.log(this.id);
}
自定义navbar
- 状态栏占位
<!-- #ifdef APP-PLUS -->
<view class="status_bar">
<view class="top_view"></view>
</view>
<!-- #endif -->
.status_bar {
height: var(--status-bar-height);
width: 100%;
background-color: #F8F8F8;
}
.top_view {
height: var(--status-bar-height);
width: 100%;
position: fixed;
background-color: #F8F8F8;
top: 0;
z-index: 999;
}
- 原生导航栏自定义按钮带红点和角标
{
"path" : "nav-dot/nav-dot",
"style" : {
"navigationBarTitleText" : "导航栏带红点和角标",
"app-plus" : {
"titleNView" : {
"buttons" : [
{
"text" : "消息",
"fontSize" : "14",
"redDot" : true
},
{
"text" : "关注",
"fontSize" : "14",
"badgeText" : "12"
}
]
}
}
}
}
目录结构
┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid 存放本地网页的目录,详见
├─platforms 存放各平台专用页面的目录,详见
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─wxcomponents 存放小程序组件的目录,详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息,详见
└─pages.json 配置页面路由、导航条、选项卡等页面类信息,详见
common 公共的css、js文件
自定义组件
- 可以在根目录的components文件夹中创建全局组件,在main.js中全局注册
- 可以在每一个模块建一个components文件夹,创建局部组件,然后在页面中引入并注册
- 父子组件传值和vue相同,使用props和this.$emit
- 兄弟组件传值,使用全局方法uni. e m i t 和 u n i . emit 和 uni. emit和uni.on,也可用于页面间传值
在需要接受的组件的created或onLoad函数中,定义监听方法
uni.$on('方法名',(参数)=>{
处理函数
})
在需要触发的组件中,在合适的时机去触发
uni.$emit('方法名',参数)
onUnload() {
// 移除监听事件
uni.$off('方法名');
},
开发环境和开发平台
// 开发环境
if(process.env.NODE_ENV === 'development'){
console.log('开发环境')
}else{
console.log('生产环境')
}
// 开发平台
switch(uni.getSystemInfoSync().platform){
case 'android':
console.log('运行Android上')
break;
case 'ios':
console.log('运行iOS上')
break;
default:
console.log('运行在开发者工具上')
break;
}
引入UI库uview
- npm安装或下载zip放在项目根目录
// 如果您的项目是HX创建的,根目录又没有package.json文件的话,请先执行如下命令:
npm init -y
// 安装
npm install uview-ui
// 更新
npm update uview-ui
- 安装sass
==uView依赖SASS==
如果您的项目HBuilder X创建的,工具->插件安装中找到"scss/sass编译"插件进行安装, 如不生效,重启HX即可
如果您的项目是由vue-cli创建的,
// 安装node-sass
npm i node-sass -D
// 安装sass-loader
npm i sass-loader -D
- 配置
// main.js
import uView from "uview-ui";
Vue.use(uView);
/* uni.scss */
@import 'uview-ui/theme.scss';
//app.vue
<style lang="scss">
/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
</style>
// pages.json
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
配置完后,您需要重启HX或者重新编译项目才能正常使用uView的功能。
请确保您的pages.json中只有一个easycom字段,否则请自行合并多个引入规则。
生命周期(重要)
建议使用onLoad代替created 调接口;使用onReady代替mounted
- 在任何页面均可以使用vue生命周期,组件中只能使用vue生命周期,页面中推荐小程序的生命周期
- 监听app卸载可以在app.vue文件使用beforeDestroy()
- tabbar页面没有onUnload()卸载页面的方法,所以app打开之后主页面只会执行一次onLoad,只会执行onShow和onHide,所以如果需要刷新页面,在onShow里初始化或者下拉刷新,如果需要传参,只能使用uni.$emit()
执行顺序如下
App.vue 页面周期
onLaunch:function(){//当uni-app 初始化完成时触发(全局只触发一次)
console.log('App onLaunch')
}
onShow: function() {//当 uni-app 启动,或从后台进入前台显示
console.log('App Show')
},
页面中的生命周期函数:
created() {//vue生命周期 页面创建时调用
console.log('created');
},
onLoad() {//监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参
console.log('onLoad');
},
onShow(){//监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
console.log('onShow');
},
mounted() {//vue 生命周期 ,html挂载的时候 调用
console.log('mounted');
},
onReady(){//监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发
console.log('onReady');
},
应用生命周期(app.vue中)
onLaunch | 当uni-app 初始化完成时触发(全局只触发一次) |
---|---|
onShow | 当 uni-app 启动,或从后台进入前台显示 |
onHide | 当 uni-app 从前台进入后台 |
onError | 当 uni-app 报错时触发 |
onUniNViewMessage | 对 nvue 页面发送的数据进行监听,可参考 nvue 向 vue 通讯 |
onUnhandledRejection | 对未处理的 Promise 拒绝事件监听函数(暂时只支持 CLI 创建的项目使用 CLI 工程,更新 uni 相关版本到 2.0.0-alpha-28020200701003 即可支持 onShareTimeline) |
应用生命周期仅可在App.vue中监听
页面生命周期
onLoad | 监听页面加载,参数类型为Object(用于页面传参option) |
---|---|
onShow | 监听页面显示,页面返回 |
onHide | 监听页面隐藏 |
onUnload | 监听页面卸载 |
onReady | 页面初次渲染完成 |
onError | 当 uni-app 报错时触发 |
onUniNViewMessage | 对 nvue 页面发送的数据进行监听,可参考 nvue 向 vue 通讯 |
onUnhandledRejection | 对未处理的 Promise 拒绝事件监听函数(暂时只支持 CLI 创建的项目使用 CLI 工程,更新 uni 相关版本到 2.0.0-alpha-28020200701003 即可支持 onShareTimeline) |
路由(小程序一样)
uni-app已支持代码块
tag
- uButton
- uCheckbox
- uGrid
- uList
- uListMedia
- uRadio
- uSwiper
js
- uRequest
- uGetLocation
- uShowToast
- uShowLoading
- uHideLoading
- uShowModal
- uShowActionSheet
- uNavigateTo
- uNavigateBack
- uRedirectTo
- uStartPullDownRefresh
- uStopPullDownRefresh
- uLogin
- uShare
- uPay