8小时uniapp入门到精通

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很像，真的很像，开发规范约束都很像。

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