8小时uniapp入门到精通

1：HBuilderX辅助工具采用

001：浏览HBuilderX

002：建立预设工程建设项目，相等于调用了两个工程建设门边，如下表所示图

2：总体产品目录内部结构重新整理

001：page.js

网页路由器文档注册登记到整座架构里，假如路由器写进去了，虽然疏失忘了建立相关联的文档，该处是校对透过JGD5的，因此收起不显著，该处是个深坑！

002：迈入mpm全力支持，预设是全力支持npm自然生态的

假如工程建设项目子产品目录没package.json，所以须要npm调用工程建设项目

工程建设项目子产品目录继续执行：

调用npm自然环境：npm init -y

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

单个vue文档引入包：

import “xgplayer”; importMp4Playerfrom 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;

最后附上工程建设项目截图：