简介
由dcloud 公司开发的 多端融合框架
1次开发 多端运行
竞品：apiCloud ，appCan ，Codova
技术架构
Vue语法+小程序的api
端
Hybrid混合开发
App端
HTML+
nvue（原生view）
native.js(js原生沟通的桥梁)
weex
内置ios/安卓的模块使用
H5端
h5专用api
各种小程序（微信为主）
准备工具
Hbuilderx （开发与编译工具）
微信小程序开发工具（微信小程序预览测试）
安卓模拟器/真机
运行app
界面
新建项目
运行多端
H5
小程序
01 打开开发工具的服务端口
02 HBuilderx配置 微信开发工具的地址
03 配置微信小程序id
04 运行到微信小程序
App
01 打开模拟器或者手机
02 配置模拟器的端口
夜神模拟器端口号：62001
海马模拟器端口号：26944
逍遥模拟器端口号：21503
MuMu模拟器端口号：7555
天天模拟器端口号：6555
03 运行到模拟器
注意项
hbuilder可能需要下载对应的插件
运行到安卓模拟器，有视图差别
运行可以需要一定的诗句
Vue语法
模板语法
文本渲染
{{表达式}}
v-text=“表达式”
表达式
简单的js运算
{{2+3}}
js方法调用
{{title.length}}
{{title.split("").reverse().join("")}}
3元运算符
<view>{{title.length>15?'长度很长':'字少事大'}}</view>
v-html 富文本
条件渲染
v-if
v-else-if
v-else
v-show
通过三元运算符
列表选项
字符串，数字，列表，对象都可以遍历
<view v-for="(item,index) in list" :key="index">{{index+1}} {{item}}</view>
一定要保证兄弟元素间的key值是唯一
属性绑定
<button v-bind:disabled=“true”>
<button :disabled="true">
表单绑定
默认
:value="单向绑定"
input
v-model=“双向绑定”
@change=“$event.detail.value”
事件，事件的值$event.detail.value
事件
事件绑定： <view v-on:click="响应"
简写绑定：<view @click="事件响应"
事件行内处理
<view @click="num++"
事件响应函数
(函数在methods定义)
<view @click="say"
<view @click="say"
事件传参
不写参数
@click="say"
等同于
@click=“say()”
等同于
@click=“say($event)”
$event 是一个固定写法 代表事件对象
@click=“doit(str)”
doit(str="你好"){
uni.showModal({title:str})
}
事件对象
$event/e
function say(e){
}
target目标对象
dataSet 组件传参
<view :data-title="title" @click="say">
function say(e){
e.target.dataset.title
}
响应方法
uni-app页面
新建页面
页面配置
pages.json
globalStyle
全局样式
默认页面的样式会应用全局样式
页面写了style 配置，那么用的配置覆盖全局的配置
pages
页面
path页面路径
style 页面样式
vue选项
data
数据
methods
方法
computed
计算
watch监听
directive指令
filter过滤
uni-app的生命周期
Vue的生命周期
创建
beforeCreate
created
可以使用this，没有dom
作用：
1. 初始数据
2. 注册监听事件
3. 开启定时器
4. ajax请求
挂载
beforeMount
mounted
可以操作dom（节点）
作用：
1. 操作dom
2. ajax请求
更新
beforeUpdate
updated
卸载
beforeDestroy
作用：
1. 移除事件监听
2. 移除停止定时器
destroyed
小程序的生命周期
onLoad
加载
能够获取页面的参数
开启ajax，定时器，事件监听
像vue的created
onShow
显示
播放媒体
onReady准备
获取节点信息
像vue的mounted
onHide 后台运行
停止播放媒体
onUnload 卸载
停止事件监听与定时器
小程序的全局方法
onPullDownRefresh
下拉刷新
onReachBottom()
触底更新
onShareAppMessage
右上角分享
onPageScroll
页面滚动
onShareTimeline
分享到朋友圈
app的全局方法
onBackPress
手机的返回键被点击
onNavigationBarButtonTap
导航栏按钮被点击
小程序的全局方法
onPullDownRefresh
下拉刷新
onReachBottom()
触底更新
onShareAppMessage
右上角分享
onPageScroll
页面滚动
onShareTimeline
分享到朋友圈
app的全局方法
onBackPress
手机的返回键被点击
onNavigationBarButtonTap
导航栏按钮被点击
组件
表单
button
按钮
type
primary主要
warn警告
default 默认
size="mini"
disabled 是否可用
input
value值
v-model对表单双向绑定
@change="$event.detail.value"
placeholder 提示文本
picker
mode
模式
time时间
date 日期
region地区
日期
start="09:01"
end="21:01"
value值
@change="$event.detail.value"
slider
滑块
value 值
max 最大
min 最小
@change="$event.detail.value"
全局vuex
路由
路由组件
navigator
导航
url 跳转页面的地址
open-type
打开类型
navigate跳转
redirect重定向
（当前页面不留历史记录）
navigateBack返回
relauch 重启
switchTab 跳转底部栏
路由传参
传递
url:path?name=mumu&age=18
接收
onLoad(option){}
option的值{name:"mumu",age:18}
路由api
uni.navigateTo({url})
跳转
uni.redirectTo({url})
重定向
uni.navigateBack()
返回
uni.switchTab()
底部栏切换
uni.reLaunch()
重启
路由配置
tabBar
color
selectedcolor
list
pagePath
iconPath
selectedIconPath
text
获取当前页面（ getApp）
01 在App.vue
定义globalData:{num:100}
02 要使用的页面获取app
var app = getApp()
03获取globalData的值
onShow(){
this.num = app.globalData.num
}
04 更新globalData值
addNum(){
app.globalData.num++;
this.num = app.globalData.num
}
获取页面栈（ getCurrentPages）
var page = getCurrentPages();
获取当前的页面栈，是一个数组（1-5）
uni.navigateBack({delta:page.length})
page[page.length-1] 获取当前页面的信息
（不要去修改）
条件编译
目的
不同的平台展示不同特性与功能
模板条件编译
格式
<!-- #ifdef H5 -->
内容
<!-- #endif -->
条件
APP
App端
H5
网页
MP
小程序
MP-WEIXIN
微信小程序
css条件编译
/* #ifdef APP */
.active{color:red}
/* #endif */
js条件编译
// #ifdef APP-PLUS
uni.showModal({
title:"你好App用户"
})
// #endif
条件配置（ pages.json）
“style”:{
"h5":{
"titleNView":{
"titleText":"我是H5"
}
},
"app-plus": {
"titleNView":false //隐藏导航栏
}
}
// #ifdef MP-WEIXIN || APP
{
"path":"pages/condition/we",
"style":{
"navigationBarTitleText": "小程序专有页面"
}
},
// #endif
Vuex
初始化
store/index.js
//导入vuex
import Vuex from 'vuex';
//导入vue
import Vue from 'vue';
//使用vuex
Vue.use(Vuex);
//导出vuex
export default new Vuex.Store({
//状态
state: {
},
//改变状态的唯一方法
mutations: {
},
//异步api操作
actions: {
},
//内部计算
getters: {
},
//模块
modules: {},
})
main.js
//导入vuex
import store from './store/index.js'
Vue.prototype.$store = store;
vuex的模块
state存放数据
mutations更新数据（唯一方式)
actions动作(异步api操作)
getters计算，从现有的state计算出新的数据modules模块
state定义数据
state: {
gTitle: {
text: "你好vuex",
color: "#000",
fontSize: "24px",
background: "#f70"
},
joks:[],
},
在页面中使用
$store.state.gTitle.text
修改只能通过mutations
组件中简写
import {mapState} from 'vuex'
computed:{
...mapState(["gTitle"])}
<view :style="gTitle">
mutations 改变数据
setFontSize (state,data) {
state.gTitle.fontSize=data+"px"
}
在页面中使用
this.$store.commit("setFontSize",80)
actions 异步操作
actions: {
//和后端交互，异步操作都会放在actions中
getJok(context,data){
uni.request({
url:"http://520mg.com/mi/list.php",
method:'GET',
data:data,
// axios get请求传参用的params , post用data
// uni.request :postget传参也是用data
//更加content-type如果是application/json
//那么data是jison如果是urlencoeded data就是url编码形式
success:res=>{
console.log(res,"getJok");
context.commit("setJoks",res.data.result)
}
})
}
},
在页面中使用
this.$store.dispatch("getJok".{page:1)
简写
导入
import {mapActions} from 'vuex'计算
methods:{
...mapActions["getJok"])
使用
this.getJok
getters 计算
getters:{
"totalLen":function(state)i return xxx}}
在页面中使用
this.$store.getter.totalLen
简写
import {mapGetters} from 'vuex'computed:{
...mapGetter(["totalLen"])}
this.totalLen
支付与打包
支付 app的支付
准备工作
支付厂商
获取id
微信：微信支付平台
https://pay.weixin.qq.com/
支付宝
打包
manifest.json
app模块配置
payment支付
代码
01 获取支付厂商
uni.getProvider()
uni.getProvider({service: "payment"})
02 用户发起支付
requestPayment(item,index){}
03 获取订单信息
getOrderInfo(item.id)
04 发起支付api
uni.requestPayment({
provider:item.id, //提供商
orderInfo: orderInfo, //订单信息
})
小程序的支付
01 用户的点击 发起支付
async weixinPay()
02 获取openid
本地存储 ||loginMpWeixin
获取code
uni.login({})
获取openid
uni.request({})
03 获取订单信息
this.getOrderInfo('wxpay')
04 根据订单信息发起支付
uni.requestPayment({...orderInfo})
打包html代码上传服务器
配置相对地址
manifest.json
web配置
运行的基础路径 ./
发行->发到网站-PC
unpackage>dist>build>H5
上传服务器
flashFXP工具上传
打包微信小程序上传
01 配置id
manifest.json 微信小程序配置
02 单击发行
发行->小程序微信
03 进入小程序上传
小程序右上角上传（先测试，真机测试）
04 微信提交审核
mp.weixin.qq.com
版本管理
审核
审核通过发布
认真填写隐私协议
05 如果网络请求配置域名必须是https开头
开发管理
服务器设置
服务器域名
request合法域名
uni.request,wx.request 请求的域名必须事先定义好
uploadFile合法域名
如果有上传也要配置上传的域名
downloadFile合法域名
配置下载域名
App打包上传应用商店
应用商店
华为
opple
vivo
小米
现在只有华为可以个人上传
其他都必须是公司
个人上传
app的版权证明（600-1500）
国家的隐私条例
应用商店的隐私审核
扫一扫
714
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
