使用Cli创建Uniapp项目，轻松搭建Uview组件库+request请求+各类工具函数

站长

2024年03月21日 18:47 · 阅读数 14

前言

最近公司的新项目也是交到了笔者手中，需求是做一个抖音+微信小程序，技术栈选用Uniapp 。

笔者去年在上海也是用uniapp做了一年多的小程序和app，感觉用Hbuilder创建的项目和用Vue-Cli创建的项目写起来感觉还是十分不同的，我是更喜欢用Cli创建项目。

下面我将手把手使用Cli搭建一个Uniapp项目，全程使用Vscode开发。

着急使用模板的同学可以直接下滑拉取Gitee仓库！！！

1. 两种创建项目

1.1 Hbuilder 可视化创建项目

使用Cli创建Uniapp项目，轻松搭建Uview组件库+request请求+各类工具函数

从官网中可以看到官方是支持这两种创建的方式，先说一说用Hb创建

下载Hb编辑器官网地址
点击创建项目（项目名称、版本选择、一般都是默认的模板）
需要安装的插件在插件市场安装 , 并且可以一键导入项目！~~~

使用Cli创建Uniapp项目，轻松搭建Uview组件库+request请求+各类工具函数

这里过程都是截图代替了，因为实在很简单，不需要文字描述~~

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 （到这里项目已经跑起来了，可以在微信开发者工具里直接运行）

使用Cli创建Uniapp项目，轻松搭建Uview组件库+request请求+各类工具函数（终端这样的提示，就是已经跑起来，截图时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

module.exports = {
    // 先不用管 'z-paging' ， 可以先放着， 也可以数组里只有uview  后续会说z-paging
    transpileDependencies: ['uview-ui' , 'z-paging']
}

2.2 将uview引入项目

App.vue

<style lang="scss">
/*每个页面公共css */
@import "uview-ui/index.scss";
</style>

main.js

import uView from "uview-ui";
Vue.use(uView);

pages.json

"easycom": {
    "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue",
},
...

tips：

配置绝对路径@符 （主要是vscode，对于@的语法提示）

根目录下创建 jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

配置小程序的一键分享

utils/mpShape.js (src下创建该目录和文件)

module.exports = {
   onLoad() {
       // 设置默认的转发参数
       uni.$u.mpShare = {
           title: '', // 默认为小程序名称
           path: '', // 默认为当前页面路径
           imageUrl: '' // 默认为当前页面的截图
       }
   },
   onShareAppMessage() {
       return uni.$u.mpShare
   }
}

main.js

// 配置小程序分享
let mpShare = require('@/utils/mpShape.js');
Vue.mixin(mpShare)

微信小程序一键分享到朋友圈

// 分享到朋友圈 仅适用于微信
// #ifdef MP-WEIXIN
onShareTimeline(res) {
    return {
          title: "小美漫画",
          path: "/pages/index/index",
    };
},
// #endif

2.2 配置通用的工具函数

request请求
Storage本地存储

a. request请求

可以使用 uview自带的第三方库的APi

Uview文档 , 也可以根据公司的需求自己封装

utils/request.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

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

// 只展示几个 更多的请看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 ，所以需要提前配置上，如果到了临界值再去配置分包，怕是已经来不及了！！！！

使用Cli创建Uniapp项目，轻松搭建Uview组件库+request请求+各类工具函数

首先新建一个存放页面的文件夹（名称随意，最好有可读性），然后去manifest.json配置哪些小程序可以配置分包。

我做的抖音和微信，都是支持分包的，直接看配置：


    "mp-toutiao" : {
        "usingComponents" : true,
        "setting" : {
            "es6" : true,
            "postcss" : true,
            "minified" : true
        },
        "appid" : "",
        "optimization" : { "subPackages": true} // 配置了这条属性，那么就开启了分包配置
    },

配置好以后，看分包的具体操作

"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

module.exports = {
    transpileDependencies: ['uview-ui' , 'z-paging']
}

"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/

<z-paging ref="paging" refresher-only @onRefresh="onRefresh">
... 需要上拉加载和刷新的数据
</z-paging>

Gitee仓库

gitee.com/lin-ruiqian…

转载自:https://juejin.cn/post/7340462380336742410

使用Cli创建Uniapp项目，轻松搭建Uview组件库+request请求+各类工具函数

前言

1. 两种创建项目

1.1 Hbuilder 可视化创建项目

从官网中可以看到 官方是支持这两种创建的方式，先说一说用Hb创建

1.2 cli命令行创建项目

详细步骤

总结 两种模式的区别

2. 配置项目

2.1 配置vue.config.js

2.2 将uview引入项目

tips：

2.2 配置通用的工具函数

a. request请求

b.Storage 一键读取和存储

2.4 封装通用方法

2.5 配置分包

2.6 z-paging

Gitee仓库

从官网中可以看到官方是支持这两种创建的方式，先说一说用Hb创建

总结两种模式的区别