likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 13

前言

最近公司的新项目也是交到了笔者手中,需求是做一个抖音+微信小程序,技术栈选用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请求+各类工具函数

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

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

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

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

1.2 cli命令行创建项目

先说步骤,我再分开讲解

  • 安装node.js , 全局安装yarn 并配置npmyarn的淘宝镜像地址
  • 全局安装 @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
评论
请登录