uni-app (一套代码,多端发行)
如果你会使用Vue那咱们继续吧!
什么是uni-app?
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。
诞生背景
多端泛滥 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉)多套平台,多套文档,加大开发维护成本
uni-app特点
1、跨平台
一套代码多端发行,而不失优雅(条件编译,保留不同平台独有特色功能方法调用)
<!--#ifdef MP-WEIXIN-->
<view>只会编译小程序</view>
<!--endif-->
<!--#ifdef XX-XXX-->
<view>只会编译XXX</view>
<!--endif-->
2、通用技术栈,学习成本低
Vue的语法,微信小程序Api,内嵌mpvue可以直接迁移,如果你会Vue可以直接入门
3、生态丰富
支持npm下载第三方模块,支持小程序自定义组件,SDK,兼容mpvue组件,支持原生混合编码
安装
可以下载两个进行配置 ,测试微信小程序与支付宝小程序同步实现 编译工具下载HBuilderX 微信小程序开发IDE 支付宝小程序 IDE 推荐使用 HBuildX 进行开发
跨多端小程序开发
创建目录
- 打开HBuilderX
- 左上角创建项目
- 选择uni-app项目
- 下面是提供几个Demo项目，可以创建学习
- 项目名称能不能大写，创建项目
运行项目
一、找到创建项目uni里面的项目目录
二、找到 manifest.js文件输入
1、里面有所有平台配置文件
需要不通平台测试,需要分别配置不同平台
2、选择微信小程序配置
配置小程序AppID 点击最上面工具栏选择运行 选择运行到小程序模拟器 选择微信小程序开发工具 第一次配置小程序开发者工具,需要打开服务
三、打开微信小程序开发左上角小
安全设置，将服务端口开启。||工具 -> 设置 -> 安全设置，将服务端口开启。
四、选择HBuild停止服务,重新运行自动打开编辑工具
.nvue 是对weex的增强。如果你不开发App，那么你不太需要nvue。
发布测试
选择HBuild最上面工具栏,点击发布进行打包,根据命令行提示在点击微信开发者工具发布
注意不要直接修改微信开发工具目录,以HBuild开发目录为主
目录介绍
与小程序配置相似
pages //存放分页目录
static //存放应用引用静态资源
main.js //入口文件
mainfest.json //跨平台所有配置项文件
pages.json //全局配置文件,类似App.json
uni.scss//全局scss文件,在分页任何位置,注意 style lang="scss" 需要设置 scss
App.vue // 应用配置，用来配置App全局样式以及监听
统一参照uni-app官方文档
初探uni-app
添加分页
- 鼠标移动pages右键
- 右键新建页面,注意检查pages.json文件会自动写入pages项,文件路径
pages.json文件 style 为分页配置项,类似小程序 page.json 修改 pages.json
知识点: uni-app分页配置在style里面写,globalStyle写全部样式配置,在一个配置文件,这里是有区别原生小程序开发,具体参照uni-app文档进行配置 pages.json
配置项
配置项
navigationBarBackgroundColor HexColor //#000000 导航栏背景颜色
navigationBarTextStyle String white //导航栏标题颜色，仅支持 black/white
navigationBarTitleText String //导航栏标题文字内容
navigationStyle String default //导航栏样式，仅支持 default/custom。
backgroundColor HexColor //#ffffff 下拉窗口的背景色 微信小程序
全局配置
globalStyle: {
//...全局配置
}
局部配置 参照 pages.style内容
> pages数组,决定谁排在前面
修改pages导致文件查找失败,检查无误,重启编辑工具
pages:[
{
path: "xxx/xxx/xxx",
style: {
//...局部配置
}
}
]
系统自带底部tabBar栏配置
如果配置tabBar需要保证abBar第一个路由,配置在第一个pages的第一个
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/component/index",
"iconPath": "static/image/icon_component.png",
"selectedIconPath": "static/image/icon_component_HL.png",
"text": "组件"
}, {
"pagePath": "pages/API/index",
"iconPath": "static/image/icon_API.png",
"selectedIconPath": "static/image/icon_API_HL.png",
"text": "接口"
}]
}
常用基本操作
优先尝试根据Vue使用操作,例如使用 v-for 替换wx:for
表达式
仅此而已,有Vue使用相似,不能使用流程控制语句
<view>{{name}}</view> <!--读取变量-->
<view>{{msg+'Msea'}}</view><!--拼接变量-->
<view>{{10-9}}</view> <!--运算符-->
<view>{{0||"NB"}}</view> <!--逻辑运算符-->
<!--数据类型方法-->
<view>{{'Msea'.indexOf('xxx')!==-1?'太原最靓仔':'no'}}</view>
<view>{{"我爱北京天安门".substr(0,2)}}</view>
属性绑定
<image :src="'https://www.w3school.com.cn/i/eg_tulip.jpg'"/>
动态样式
<view :class="`${'box'}`+''+`12`">{{`1`+1}}</view>
<view :class="{className:true}"></view>
<view :class="['box',true?'col2':'']"></view>
<view class="box1212" :class="['box',true?'col2':'']"></view>
<view :style="{ color: 'red', fontSize: 20 + 'px' }">666</view>
<view :style="[{ color: pink, fontSize: 20 + 'px' }]">777</view>
指令
<view class="box" v-show="true">v-show</view>
<view v-if="text==='登陆'">{{'欢迎'+name+'登陆'}}</view>
<view v-else-if="text==='未登陆'">未登陆</view>
<view v-else>!!!!!</view>
<input type="text" v-model="val">{{val}} <!--数据双项绑定-->
<!--支持v-model修饰符-->
<input type="text" v-model.number="val">{{val+11}}
事件
<!--事件,阻止事件冒泡-->
<view @click="test1(true)"> <!--传入参数-->
<button @click.stop="test2">test</button>
</view>
遍历
<!--数组遍历-->
<ul id="example-1">
<li v-for="(item,index) in items">
{{ item.message }}
</li>
</ul>
<!--对象遍历-->
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>
路由跳转
页面栈最多十层。使用uni.navigateTo频繁切换,会导致栈溢出,跳转失败
// 非tabbar配置的页面我们使用 navigateTo跳转时保留老页面,一般用于需要返回
uni.navigateTo({
url: "../one/one?name=Msea"
})
// 跳转pages.json>tabbar>配置过的页面,使用 switchTab
uni.switchTab({
url: "../one/one"
})
// 不保留当前页面,跳转非配置页面
uni.redirectTo({
url: "../one/one"
})
响应式单位rpx
推荐使用最近公告推荐使用rpx替代upx
基于苹果6 1px =2rpx
<view class="box1"></view>
<view class="box2"></view>
<style lang="scss">
.box1{
width:200rpx;
height:200rpx;
background:red;
}
.box2{
width:100px;
height:100px;
background:pink;
}
</style>
节点操作
微信小程序里面没有 window,document对象,那如果需要进行dom操作
var query=uni.createSelectorQuery();
query.select(".titlerh").boundingClientRect((nodes)=>{
console.log(nodes)
}).exec();
query.select(".box1")
.boundingClientRect()
.selectAll(".box2")
.boundingClientRect()
.exec((res)=>{
console.log(res);
});
组件
创建文件夹 components目录统一写法,鼠标右键创建组件
所有组件与属性名都是小写，单词之间以连字符-连接。
<template>
<uni-test/>
</template>
<script>
import uniTest from "../../components/test.vue"
export default {
data() {
return {};
},
methods:{
test(){
this.text = "登录";
}
},
components: {
uniTest //引入组件
}
}
</script>
<style lang="scss">
...style
</style>
生命周期
应用生命周期 App.vue
App({
onLaunch (options) {
console.log("小程序初始化");
},
onShow (options)
console.log("小程序显示");
},
onHide () {
console.log("小程序隐藏");
}
})
分页生命周期 pages
Page({
onLoad: function(options) {
// 页面创建时执行
console.log("页面加载");
},
onShow: function() {
console.log("页面进入");
},
onReady: function() {
console.log("页面首次渲染完毕时执行");
},
onHide: function() {
console.log("页面离开");
},
onPullDownRefresh: function() {
// 触发下拉刷新时执行
console.log("下拉触发");
//enablePullDownRefresh 开启下拉
},
onReachBottom: function() {
// 页面触底时执行
console.log("下拉到底");
},
onShareAppMessage: function (e) {
// 页面被用户分享时执行
//通过按钮调用
//点击触发弹窗
<button open-type="share">分享</button>
console.log("用户分享");
return {
title: '妹子图片',
path: '/pages/index/index', //当前页面 path
imageUrl: "/images/1.jpg",
desc: '面向百度开发',
success: (res) => {
console.log("转发成功", res);
},
fail: (res) => {
console.log("转发失败", res);
}
}
},
onPageScroll: function() {
console.log("页面滚动时执行");
},
onResize: function() {
console.log("屏幕旋转触发");
}
})
组件生命周期
uni-app components组件支持的生命周期，与vue标准组件的生命周期相同。wx小程序支持生命周期
beforeCreate(){} // 在实例初始化之后被调用
created(){} // 在实例创建完成后被立即调用。
beforeMount(){} // 在挂载开始之前被调用。
mounted(){} // 挂载到实例上去之后调用。
beforeDestroy(){} // 实例销毁之前调用。在这一步，实例仍然完全可用。
UI组件
uni-ui
使用方法与微信小程序一致,推荐使用uni-ui
<scroll-view
:scroll-x="true"
style="boder:1px solid red;white-space:nowrap"
@scroll="scroll">
<view style="
background:red;
width:200px;height:100px;
display:inline-block;"
></view>
<view style="background:yellow;width:200px;height:100px;display:inline-block;"></view>
<view style="background:pink;width:200px;height:100px;display:inline-block;"></view>
<view style="background:blue;width:200px;height:100px;display:inline-block;"></view>
</scroll-view>
引入三方UI
例如 Vant Weapp 下载
- 根目录下创建 wxcomponents
- 将下载包内部 dist包粘贴到uni-app根目录wxcomponents文件夹下
- 配置
{
"path" : "pages/one/one",
"style" : {
"usingComponents":{
"van-button": "/wxcomponents/dist/button/index" //参照wx组件引
}
}
}
- 在App.vue,引入样式
<style>
/*每个页面公共css */
@import "/wxcomponents/dist/common/index.wxss";
</style>
- 在one分页内直接使用van-button组件,不需要引入
- 注意如果报错,检查路径如果没有问题,可以选择重编辑器重新启动微信开发工具
常用API调用
获取用户授权弹窗
<button open-type="getUserInfo" @getuserinfo="eventName"> 获取头像昵称 </button>
getUserInfo: function(e) {
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
返回所有用户授权
wx.getSetting({success:()=>{"返回用户所有用户授权"}})
照相机接口
因为,调用照相机获取临时图片格式,直接上传三方服务器,是不支持的,需要微信做解析,转发
wx.uploadFile 上传微信需要做转发看不到传输的参数
uni.chooseImage({
count: 1, //图片张数
sizeType: ['original', 'compressed'],//原图,压缩图,
sourceType: ['album', 'camera'], //本地相册,拍照
success :res=> {
const tempFilePaths = res.tempFilePaths//微信小程序图片临时路径
this.setData({tempFilePaths});
}
})
// 预览接口
viewImgs(index) {
uni.previewImage({
current: this.data.tempFilePaths[index], // 当前显示图片的http链接
urls:this.data.tempFilePaths // 需要预览的图片http链接列表
});
},
//小程序图片上传
fileUplaod() {
uni.uploadFile({
url: "http://wxs.ixinangou.net/index/index/dofiles",
filePath: this.data.tempFilePaths[0],
name: "file", //上传图片key
formData: {
user: "MSea" //需要额外携带参数
},
header: {
"content-type": "multipart/form-data"
},
success: res => {
console.log("data");
}
});
}
请求
微信原生请求接口
注意设置,不效验合法域名,回忆怎么添加合法域名
//GET 会自动拼接参数
//queryStringParams
uni.request({
method: "GET",
url: "https://cnodejs.org/api/v1/topics",
data: {
uname: "Msea"
},
success: (res) => {
console.log(res)
}
})
//POST 默认参数为payLoad,为json
uni.request({
method: "POST",
url: "https://cnodejs.org/api/v1/topics",
data: {
uname: "Msea"
},
success: (res) => {
console.log(res)
}
})
//POST form-data 数据
// 'content-type': 'multipart/form-data' 用于文件上传
uni.request({
url: 'https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312',
data:{fileId:'123'},
method:'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success:function(res){}
})
地图使用
地图组件
<map
id="map"
longitude="经度"
latitude="纬度"
scale="缩放级别(14)"
bindcontroltap="点击地图触发FN"
markers="{{添加标记}}"
bindtap="markertap" 点解地图触发
show-location 将地图中心移置当前定位点，此时需设置地图组件 show-location 为true。
style="width: 100%; height: 300px;"></map>
移动地图中心点
移动端测试有效
onShow: function() {
// 地图上下文对象
this.mapCtx = uni.createMapContext('map');
},
ckMap(e){
//小程序不支持 Objcet.assign
var temp={
iconPath: "/assets/img/local.png",
id: 0,
width: 25,
height: 25,
...e.detail
}
var markers=this.data.markers;
markers.push(temp);
this.setData({markers},()=>{
var data={
...e.detail
};
this.mapCtx.moveToLocation(data)
})
}
定位
uni.getLocation({
type: 'gcj02', //腾讯地图坐标系
success:(res)=> {
const latitude = res.latitude
const longitude = res.longitude
}
})
用户授权弹窗
app.json配置文件
//app.json
{
"pages": ["pages/index/index"],
"permission": {
"scope.userLocation": {
"desc": "熊猫创客需要获取您的位置亲" // 高速公路行驶持续后台定位
}
}
}
获取当前位置并移动地图中心店
wx.getLocation({
type: 'gcj02', //腾讯地图坐标系
success: (res) => {
const latitude = res.latitude
const longitude = res.longitude
var temp = {
iconPath: "/assets/img/local.png",
id: 0,
width: 25,
height: 25,
latitude,
longitude
}
var markers = this.data.markers;
markers.push(temp);
this.setData({
markers
}, () => {
var data = {
latitude,
longitude
};
this.mapCtx.moveToLocation(data)
})
}
})
vuex
uni-app已经内置了vuex
- 在项目的根目录下，创建一个名为store的文件夹然
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
num:0
},
mutations: {
add(store){
store.num++;
}
},
actions: {}
})
export default store
- main.js入口文件引入
import store from './store'
Vue.prototype.$store = store;
const app = new Vue({
...App,
store
})
app.$mount()
- 组件内引入
<template>
<view>
<view>{{num}}</view>
<button @click="test">test1</button>
</view>
</template>
<script>
import {
mapState,
mapMutations
} from 'vuex';
export default {
computed:{
...mapState(['num'])
},
methods:{
test() {
console.log(this.$store.commit("add"))
}
}
}
</script>
条件编译
可以安装支付宝小程序进行测试
#ifdef %PLATFORM%
//这些代码只在该平台编译
#endif
#ifdef ： if defined 仅在某个平台编译
#ifndef ： if not defined 在除里该平台的其他编译
#endif ： end if 结束条件编译
%PLATFORM% 需要编译的平台，上面的MP就是各个小程序的意思
常用 %PLATFORM%
h5 h5平台
MP-WEIXIN 微信小程序
MP-ALIPAY 支付宝小程序
MP-BAIDU 百度小城
MP-TOUTIAO 头条小程序
总结: 优先使用Vue用法,只要实现微信开发,支持wx,ui,api,统一使用uni的Api,多看文档
