1：HBuilderX工具使用

001：下载HBuilderX

002：创建默认项目，相当于初始化了一个工程架子，如下图

2：整体目录结构整理

001：page.js

页面路由文件注册到整个框架里，如果路由写进去了，由于疏忽忘了创建对应的文件，此处是编译通过不去的，并且报错不明显，此处是个大坑！

002：开启mpm支持，默认是支持npm生态的

如果项目根目录没有package.json，那么需要npm初始化项目

项目根目录执行：

初始化npm环境：npm init -y

安装npm包命令： npm install 包名 --save

单个vue文件引入包：

import "xgplayer";import Mp4Player from 'xgplayer-mp4';import HlsPlayer from 'xgplayer-hls';

package.json 文件如下图

003：全局css和JS引入整个框架

单页面想引入指定的css和JS，怎么引入？如下图

css文件里怎么有字体文件，怎么引入？如下图：

想用自己的熟悉的请求库，ajax之类的，怎么封装，怎么用？

第一步：创建一个wxapp.js，名称注意可读性如下图：

wxapp.js 里直接引入 jquery.js其实不能用，需要对jquery.js 稍作变动，因为我们每个文件都需要

export 导出来对象，看jquery.js的变动，如下图：

wxapp.js 怎么配置，正式环境用uniapp自带的请求库？如下图

怎么定义全局的接口地址呢，那么多，想写在一个文件里，后续升级方便切换接口，如下图：

根目录下定义一个config.js，代码分析如图：

全局注册config.js，如下图：

所有单文件里面使用$config，方便，一次性导入到vue全局属性里。

请问页面直接怎么传参，怎么打开新页面，传参？如下图

新页面怎么接收参数呢？如下图：

下面上传这个好用的项目配置

wxapp.js文件

/** * Created by WebStorm. * User: 老孟编程 * Email: 835173372@qq.com * Date: 2022/4/24 10:35 */const Debug = true;import jquery from '@/jquery.min.js';const wxapp = {    ajax: function (url, pageparm, mark = 0, method = "POST",header={}) {        pageparm.token =  uni.getStorageSync('token') ? uni.getStorageSync('token') : '';        return new Promise(function (resolve) {            if(mark == 1){                uni.showToast({                    title: '数据加载中',                    icon: 'loading',                    duration: 2000                });            }            if(Debug == true){                jquery.ajax({                    type: method,                    url: url,                    data: pageparm,                    dataType: 'json',                    timeout: 1000 * 30,                    async: true,                    cache: false,                    success: function (ret) {                        if(mark == 1){                            uni.hideToast();                        }                        if (ret.data.status == -1) {                            uni.clearStorageSync();                        }                        resolve(ret)                    },                    error: function (XMLHttpRequest, textStatus, errorThrown) {                        uni.showToast({                            title: XMLHttpRequest,                            icon: fail,                            duration: 2000                        });                    },                });            }else{                uni.request({                    url: url,                    data:pageparm,                    dataType: 'json',                    method: method,                    header: header,                    timeout: 1000 * 30,                    success: (ret) => {                        if(mark == 1){                            uni.hideToast();                        }                        if (ret.data.status == -1) {                            uni.clearStorageSync();                        }                        resolve(ret.data);                    },                    fail: (ret) =>{                        uni.showToast({                            title: ret.data.msg,                            icon: fail,                            duration: 2000                        });                    }                });            }        });    },    login: function () {        if (!uni.getStorageSync('token')) {            return false;        } else {            return true;        }    },    success: function (title) {        uni.showToast({            title: title,            icon: 'success',            duration: 2000        });    },    fail: function (title) {        uni.showToast({            title: title,            icon: 'error',            duration: 2000        });    },    error: function (title) {        uni.showToast({            title: title,            icon: 'error',            duration: 2000        });    }};export default wxapp;

最后附上项目截图：

在很熟悉vue和Js的情况下，uniapp还是人性化的，用了几年apicloud，发现uniapp和apicloud很像，真的很像，开发规范约束都很像。

比如抖音小程序和微信小程序，文档几乎都一样，这并不能说明什么，对我们开发者还是很友好的，欢迎技术交流指正！！