前言
最近公司的新项目也是交到了笔者手中,需求是做一个抖音+微信小程序,技术栈选用Uniapp 。
笔者去年在上海也是用uniapp做了一年多的小程序和app,感觉用Hbuilder创建的项目和用Vue-Cli创建的项目写起来感觉还是十分不同的,我是更喜欢用Cli创建项目。
下面我将手把手使用Cli搭建一个Uniapp项目,全程使用Vscode开发。
着急使用模板的同学可以直接下滑拉取Gitee仓库!!!
1. 两种创建项目
1.1 Hbuilder 可视化创建项目
从官网中可以看到 官方是支持这两种创建的方式,先说一说用Hb创建
- 下载Hb编辑器 官网地址
- 点击创建项目 (项目名称、版本选择、一般都是默认的模板)
- 需要安装的插件在插件市场安装 , 并且可以一键导入项目!~~~
- 这里过程都是截图代替了,因为实在很简单,不需要文字描述~~
1.2 cli命令行创建项目
先说步骤,我再分开讲解
- 安装
node.js
, 全局安装yarn
并配置npm
和yarn
的淘宝镜像地址 - 全局安装
@vue-cli
- 执行命令
vue create -p dcloudio/uni-preset-vue my_uniapp
- 执行命令
cd my_uniapp
- 执行命令
yarn dev:mp-weixin
(到这里项目已经跑起来了,可以在微信开发者工具里直接运行)
(终端这样的提示,就是已经跑起来,截图时toutao不用理会!!)
详细步骤
- nodejs官网,进入官网点击左侧下载,笔者的nodejs版本是18。详细的步骤不多说了,百度都可以搜得到。
- 配置淘宝镜像地址
npm config set registry https://registry.npmmirror.com/
npm install -g yarn
(yarn同样也配置一次淘宝镜像)npm install -g @vue/cli
在需要创建项目的文件夹下,输入cmd 打开命令行
- 执行
vue create -p dcloudio/uni-preset-vue my_uniapp
- 进入项目文件夹下
cd my_uniapp
(下一步开始配置Uview@2) yarn add sass -D
yarn add sass-loader@10 -D
yarn add uview-ui@2.0.36
此时,需要的包都安装完毕,可以用vscode打开项目,进行下一步配置
总结 两种模式的区别
- cli
- 可以使用vscode开发
- 编译器更加友好,
- 性能好、生态好、插件丰富、代码报错和代码补全都比HB强大
- 可以使用第三方库 day.js echarts 等等
- 可以修改
package.json
命令 更加灵活
- Hb
- 简单轻松,无需过多配置
- 偶尔Vscode会出现兼容问题,HB并不会
2. 配置项目
(此次配置都是 使用命令行创建项目的配置 , 无关Hb)
2.1 配置vue.config.js
在根目录下,创建 vue.config.js
js
module.exports = {
// 先不用管 'z-paging' , 可以先放着, 也可以数组里只有uview 后续会说z-paging
transpileDependencies: ['uview-ui' , 'z-paging']
}
2.2 将uview引入项目
- App.vue
vue
<style lang="scss">
/*每个页面公共css */
@import "uview-ui/index.scss";
</style>
- main.js
js
import uView from "uview-ui";
Vue.use(uView);
- pages.json
json
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue",
},
...
tips:
配置绝对路径@符 (主要是vscode,对于@的语法提示)
根目录下创建 jsconfig.json
json
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
配置小程序的一键分享
- utils/mpShape.js (src下创建该目录和文件)
js
module.exports = {
onLoad() {
// 设置默认的转发参数
uni.$u.mpShare = {
title: '', // 默认为小程序名称
path: '', // 默认为当前页面路径
imageUrl: '' // 默认为当前页面的截图
}
},
onShareAppMessage() {
return uni.$u.mpShare
}
}
- main.js
js
// 配置小程序分享
let mpShare = require('@/utils/mpShape.js');
Vue.mixin(mpShare)
- 微信小程序一键分享到朋友圈
vue
// 分享到朋友圈 仅适用于微信
// #ifdef MP-WEIXIN
onShareTimeline(res) {
return {
title: "小美漫画",
path: "/pages/index/index",
};
},
// #endif
2.2 配置通用的工具函数
- request请求
- Storage本地存储
a. request请求
可以使用 uview自带的第三方库的APi
Uview文档 , 也可以根据公司的需求自己封装
- utils/request.js
js
// isShowLoading 参数用于有些请求时定时器,不需要显示Loading 的图标
const request = (options , isShowLoading = true) => {
options.method && (options.method = options.method.toUpperCase());
return new Promise((resolve, reject) => {
if(isShowLoading){
uni.showLoading({
title: '加载中'
})
}
const HOST = 'http://localhost:3000' // 自己公司的域名
const url = `${HOST}${options.url}`
uni.request({
url ,
method: options.method || "GET",
data: options.data || {},
header: options.header || {
"content-type": "application/x-www-form-urlencoded",
},
success: (res) => {
resolve(res.data);
},
fail: (err) => {
reject(err);
},
complete:()=>{
if(isShowLoading){
uni.hideLoading()
}
}
});
});
};
export default request;
b.Storage 一键读取和存储
- utils/Storage.js
js
class Storage {
setStorage(name , data){
try {
uni.setStorageSync(name, data)
} catch (err) {
console.log(err);
}
}
//从本地缓存中读取置顶name对应的内容
getCache(name) {
let data;
try {
data = uni.getStorageSync(name);
} catch (e) {
console.log(e);
}
return data;
}
//从本地缓存中移出指定key
removeCache(name) {
try {
uni.removeStorageSync(name);
} catch (e) {
console.log(e);
}
}
//清除本地数据缓存
clearCache(){
try{
uni.clearStorageSync();
}catch(e){
console.log(e)
}
}
}
export default new Storage()
2.4 封装通用方法
这里主要是对uni
的一些Api
做了二次封装 , 无关性能,只是对于代码美观和可读性
- common/index.js
js
// 只展示几个 更多的请看Gitee仓库
const modal = ({
title = "温馨提示",
content,
showCancel = true,
cancelText = "取消",
cancelColor = "#000",
confirmText = "确定",
confirmColor = "#007acc",
}) =>
uni.showModal({
title: title,
content,
showCancel,
cancelText,
cancelColor,
confirmText,
confirmColor,
success: () => {
console.log("modal 展示");
},
});
const uploadFn = (filePath, that) => {
uni.uploadFile({
url: UPLOAD_HOST,
filePath,
name: "file",
header: {
"content-type": "application/json; charset=utf-8",
},
// #ifdef MP-TOUTIAO
formData: {
appid: "tt015577e89e6485d601",
},
// #endif
success: (res) => {
const dataObject = JSON.parse(res?.data);
// #ifdef MP-TOUTIAO
if (dataObject.data.check_img_result.err_no !== 0) {
that.creactCartoonImg = "";
uni.showToast({ title: "图片违规!!", icon: "fail" });
return;
}
// #endif
const { url } = dataObject.data;
that.isUpload = false;
that.creactCartoonImg = url;
that.noticeText = `上传成功,点击生成头像即可开始制作。`;
uni.showToast({
title: "上传成功",
icon: "success",
});
},
fail: function () {
uni.showToast({
icon: "fail",
title: "上传失败",
});
},
complete: (res) => {},
});
};
...
2.5 配置分包
主要小程序对主包的体积有限制,性能上开发和APP还是有很大区别的,要求是主包不能大于2M , 所以需要提前配置上,如果到了临界值再去配置分包,怕是已经来不及了!!!!
首先新建一个存放页面的文件夹(名称随意,最好有可读性),然后去manifest.json
配置哪些小程序可以配置分包。
我做的抖音和微信,都是支持分包的,直接看配置:
json
"mp-toutiao" : {
"usingComponents" : true,
"setting" : {
"es6" : true,
"postcss" : true,
"minified" : true
},
"appid" : "",
"optimization" : { "subPackages": true} // 配置了这条属性,那么就开启了分包配置
},
配置好以后,看分包的具体操作
json
"subPackages": [
{
"root": "pages_second", // 建的分包文件夹的目录
"pages": [
{
"path":"works/works", // 具体路径
"style": {
"navigationBarTitleText": "作品集"
}
}
]
}
],
2.6 z-paging
最后推荐一个高性能的上拉刷新,下拉加载的组件。
和Uview
的引入配置大体一致
yarn add z-paging@2.7.5
- 配置
vue.config.js
- 配置
pages.json
- 页面中使用
看看完整版的这两个文件, 一定不要出错, 一个标点符号都不能错
- vue.config.js
js
module.exports = {
transpileDependencies: ['uview-ui' , 'z-paging']
}
json
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue",
"^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)": "z-paging/components/z-paging$1/z-paging$1.vue"
},
...
- 页面中使用z-paging
- 如果需要修改样式,要使用深度选择器
::v-deep
, 不要使用/deep/
vue
<z-paging ref="paging" refresher-only @onRefresh="onRefresh">
... 需要上拉加载和刷新的数据
</z-paging>