一、简介
uni-app 是一个使用 Vue.js (opens new window) 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台;
二、开发工具
uni-app 推荐使用 Hbuilderx 开发工具来开发项目( 下载地址:HBuilderX-高效极客技巧,下载 App开发版);结合微信开发者工具进行调试
三、创建项目
(1)打开Hbuilderx 点击 文件- 新建- 项目
(2)uni-app -> 填写项目名称、选择项目存放路径 -> 模板 uni-ui 项目->创建,然后就可以生成一个小程序项目;
(3)项目结构
- pages: 存放所有页面
- static文件:存放静态资源文件,css、js、jpg
- App.vue:应用配置,配置小程序全局样式、生命周期,提取每个页面公共css,可以在其他vue中使用(可以被局部style覆盖)
- main.js:Vue 初始化入口文件,可以统一配置全局的对象、数组、函数(如url与用户信息)
-
manifest.json:项目配置与发布
- 项目默认分配一个uni-app;
- App图标、启动图配置是发布用的;
- App模块权限是第三方的权限(支付、定位、摄象头等)
- h5配置(https设置、端口设置)
- 微信小程序配置(官方的App ID、本地测试环境建议取消勾选“检查安全域名和TLS版本”)
- pages.json:配置页面路径、页面样式、tabBar等信息
- uni.scss:全局样式
四、把项目运行到微信开发者工具
(1)配置 appid:在 manifest.json 文件 -> 微信小程序配置-> 填写微信小程序 appID;
(2)在 Hbuilderx 配置微信开发者工具的安装路径(这样可以在 Hbuilderx 里面运行的时候自动打开微信开发者工具查看项目):工具 -> 设置 -> 运行配置 -> 小程序运行配置,配置微信开发者工具的安装路径,如:C:\Program Files (x86)\Tencent\微信web开发者工具
(3)在微信开发者工具开启服务端口:微信开发者工具 点击设置 -> 安全设置 -> 安全,开启服务端口
(4)运行:Hbuilderx 点击 运行 ->运行到小程序模拟器 点击第一个就可以在 Hbuilderx 自动编译,成功之后会自动打开微信开发者工具;
注意:这个时候我们想修改项目里面的内容,需要在 Hbuilderx 里面修改
五、开始项目开发
(1)tabar底部导航栏设置 ,在page.json文件中设置,和pages同级
// 底部导航栏设置
"tabBar":{
"selectedColor":"#1296db", // 文字选中后颜色
"color": "#333333", // 文字本身颜色
// 使用图标库
// "iconfontSrc": "static/fonts/iconfont.ttf",
"list":[
{
"pagePath":"pages/home/home",
"text":"首页",
"iconPath":"static/tabar/home.png", // 图标图片路径
"selectedIconPath":"static/tabar/home-active.png" // 选中后图标图片路径
// "iconfont":{
// "text": "\ue74e",
// "selectedText": "\ue74e"
// }
},
{
"pagePath":"pages/cate/cate",
"text":"分类",
"iconPath":"static/tabar/cate.png",
"selectedIconPath":"static/tabar/cate-active.png"
},
{
"pagePath":"pages/cart/cart",
"text":"购物车",
"iconPath":"static/tabar/cart.png",
"selectedIconPath":"static/tabar/cart-active.png"
},
{
"pagePath":"pages/my/my",
"text":"我的",
"iconPath":"static/tabar/my.png",
"selectedIconPath":"static/tabar/my-active.png"
}
]
},
(2)配置网络请求
- 在根目录下新建utils文件夹-> 该文件夹下创建request.js文件,进行封装数据请求函数
// #ifdef H5
var baseURL = "/api"
// #endif
// #ifndef H5
var baseURL = "https://ku.qingnian8.com/dataApi"
// #endif
var request = function(options){
return new Promise((resolve,reject)=>{
uni.request({
url:baseURL+options.url,
method:options.method||'GET',
data:options.data||{},
dataType:options.dataType||'json',
success: (res) => {
resolve(res.data)
},
fail: (err) => {
reject(err)
}
})
})
}
export default request
- 在根目录下新建api文件夹->该文件夹创建index.js文件
// 引入request请求方法
import request from '../utils/request.js';
// 请求首页基础数据的方法
export function getHome(params){
return request({
url:'/news/navlist.php',methods:'GET',
params: params
})
}
// 获取首页指定分类下的分页数据
export function getChoose(data){
return request({
url:'/news/detail.php',
method:'POST',
data:data
})
}
- 在需要使用的页面引入和调用
<script>
import { getHome } from '../../api/index.js'
onLoad(){
this.getHome()
},
methods:{
// 获取首页
getHome(){
getHome().then(res=>{
console.log('res',res)
})
},}
</script>
(3)公共组件封装和使用
- 在根目录下创建components文件->在该文件下创建组件(并创建同名目录)
- 在需要使用的页面中引入,注册,使用
<template>
<view>
<div>
<-- 使用 -->
<Texthome></Texthome>
</div>
</view>
</template><script>
// 引入
import TextHome from '../../components/Texthome/Texthome.vue'
export default {
components:{TextHome}, // 注册}
</script>
(4)本地缓存
uni.setStorageSync('homeLists',JSON.stringify(data)) // 缓存到本地
let a = JSON.parse(uni.getStorageSync('homeLists') ) // 获取本地数据
六、小程序分包
App默认为整包。因小程序有体积和资源加载限制,分包的目的是优化小程序的下载和启动速度
(1)创建分包目录:在根目录下创建分包目录,subpackage;
(2)在pages.json文件中配置分包结构
"subPackages": [{
"root":"subpackage",
"pages":[ ]
}]
(3)创建分包页面
在 sunpackage 目录上右键点击->新建页面->填写页面名称->勾选在pages.json中注册->选择分包 sunpackage -> 然后创建就可以了,编译器会自动在代码中将配置信息填充到 sunpackage 分包下面;
// 分包
"subPackages":[
{
"root":"subpackage",
"pages":[
{
"path" : "goods-detail/goods-detail",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
]
}
],
七、小程序发布
小程序只有在发布后才能够被用户检索使用,开发期间为了便于调试,小程序会携带 sourcemap 等类型的文件,并且代码没有进行压缩因此体积比较大,所以需要压缩发布;
1、点击 hbuilderx 工具栏 ->发行 -> 小程序-微信,这时候会有一个弹出框,需要填写小程序的名称和 AppID;
2、点击发行按钮,hbuilderx 的控制台就会显示打包编译进度;编译成功之后会自动发开微信开发者工具,这时候点击上传按钮;然后会弹出一些提示信息,点击确定,弹出 版本号、项目备注弹窗,点击上传就可以了;
3、提交审核
登陆到微信公众平台,管理->版本管理->提交审核 (第一次提交要填写小程序信息)
八、app端发布
1、点击 hbuilderx 工具栏 ->发行 -> 原生App-云打包