HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

mui Script error. filename: lineno:0

真机调试 Uncaught TypeError

IOS调试时候报错:
mui Script error. filename: lineno:0

发现好像是JS加载失败了,调用函数都报这个错误

然后发现是由于项目根目录有中文文件导致的
(当时图方便备份,就在项目下 复制黏贴 了 一份 "index - 副本.php" )

删掉后,重启HBuilder,再打开调试就不会报错了

继续阅读 »

IOS调试时候报错:
mui Script error. filename: lineno:0

发现好像是JS加载失败了,调用函数都报这个错误

然后发现是由于项目根目录有中文文件导致的
(当时图方便备份,就在项目下 复制黏贴 了 一份 "index - 副本.php" )

删掉后,重启HBuilder,再打开调试就不会报错了

收起阅读 »

nvue 仿抖音视频轮播模版图片外链

短视频

此文章是为 nvue 仿抖音视频轮播模版图片提供外链

模板正在紧张的开发中。。。

此文章是为 nvue 仿抖音视频轮播模版图片提供外链

模板正在紧张的开发中。。。

unify Ui基于uni-app平台全端通用组件库

UI nvue uniapp

unify Ui 简介

基于uni-app平台开发的一套轻量级全端UI框架,适用于nvue与vue页面,核心样式文件遵循weex规范编写,在uni.scss文件可配置全局的样式。
编写nvue或者vue文件使用unifyui可以达到APP(nvue/vue)/H5/微信小程序/百度小程序/支付宝小程序/字节跳动小程序/QQ小程序效果达到一致性,
unifyui内的组件都全端兼容,unifyui收集了350+常用图标(全端兼容)。unifyui会长期高效率的更新组件和模板。

交流反馈

QQ群:871507982,欢迎共同交流学习。

插件市场地址

unify ui 插件市场地址

文档地址

unify ui 文档

码云地址

gitee 码云

温馨提示

unifyUi框架采用scss预处理语言编写,所以使用本框架前必须安装scss预处理语言。
安装插件: HBuilder X开发工具 => 工具 => 插件安装 => scss/sass编译 => 安装

平台差异

App(nvue/vue) H5 微信小程序 支付宝小程序 QQ小程序 百度小程序 头条小程序

快速上手

快速上手

  • 配置型 :以 uni.scss 为配置中心的项目结构,以配置方式帮助你更好的开发项目。
  • 全端性:开发 nvue和vue(ios/android) + 各端小程序 + H5 端样式一致。
  • 高效率:熟悉以flex布局和辅助布局为基础,高效开发界面。
  • 完善的字体图标库,集成了350+个常用字体图标。
继续阅读 »

unify Ui 简介

基于uni-app平台开发的一套轻量级全端UI框架,适用于nvue与vue页面,核心样式文件遵循weex规范编写,在uni.scss文件可配置全局的样式。
编写nvue或者vue文件使用unifyui可以达到APP(nvue/vue)/H5/微信小程序/百度小程序/支付宝小程序/字节跳动小程序/QQ小程序效果达到一致性,
unifyui内的组件都全端兼容,unifyui收集了350+常用图标(全端兼容)。unifyui会长期高效率的更新组件和模板。

交流反馈

QQ群:871507982,欢迎共同交流学习。

插件市场地址

unify ui 插件市场地址

文档地址

unify ui 文档

码云地址

gitee 码云

温馨提示

unifyUi框架采用scss预处理语言编写,所以使用本框架前必须安装scss预处理语言。
安装插件: HBuilder X开发工具 => 工具 => 插件安装 => scss/sass编译 => 安装

平台差异

App(nvue/vue) H5 微信小程序 支付宝小程序 QQ小程序 百度小程序 头条小程序

快速上手

快速上手

  • 配置型 :以 uni.scss 为配置中心的项目结构,以配置方式帮助你更好的开发项目。
  • 全端性:开发 nvue和vue(ios/android) + 各端小程序 + H5 端样式一致。
  • 高效率:熟悉以flex布局和辅助布局为基础,高效开发界面。
  • 完善的字体图标库,集成了350+个常用字体图标。
收起阅读 »

开启权限

https://ask.dcloud.net.cn/article/35915

https://ask.dcloud.net.cn/article/35915

解决mui轮播组件隐藏后再显示sliderProgressBar进度条初始化失效问题

// 隐藏再显示需要重新初始化进度条宽度
var progressBarWidth = document.querySelector('body').offsetWidth / 2;
var slider_id = document.querySelector('.mui-slider').getAttribute('data-slider');
mui.data[slider_id].progressBarWidth = progressBarWidth;

我这里获取body的二分之一宽度

继续阅读 »

// 隐藏再显示需要重新初始化进度条宽度
var progressBarWidth = document.querySelector('body').offsetWidth / 2;
var slider_id = document.querySelector('.mui-slider').getAttribute('data-slider');
mui.data[slider_id].progressBarWidth = progressBarWidth;

我这里获取body的二分之一宽度

收起阅读 »

mui封装的网络请求,如何引入到原生Android中被调用

HTML5+

我用mui封装的一个网络请求,在Hbuil,der中运行是完全可以的,但是我将代码引入到原生Android中,就无法获取响应数据了,希望有大佬给予指点
我个人的想法是将mui封装的网络请求制作成js插件,但是不知道怎么实现,希望有大佬给予指点

我用mui封装的一个网络请求,在Hbuil,der中运行是完全可以的,但是我将代码引入到原生Android中,就无法获取响应数据了,希望有大佬给予指点
我个人的想法是将mui封装的网络请求制作成js插件,但是不知道怎么实现,希望有大佬给予指点

团队开发商城APP、商城APP定制开发、团队开发

App 移动APP

团队开发商城APP、商城APP定制开发、团队开发
商城APP定制开发,商城APP根据功能需求进行开发
1.需求沟通

  1. 确定需求,报价工期
  2. UI设计图
  3. 前端
  4. 后台
  5. 测试
  6. 修复
  7. 上线

团队开发商城APP、商城APP定制开发、团队开发
商城APP定制开发,商城APP根据功能需求进行开发
1.需求沟通

  1. 确定需求,报价工期
  2. UI设计图
  3. 前端
  4. 后台
  5. 测试
  6. 修复
  7. 上线

欢迎大家参与快应用vue原生渲染模式的适配共研

快应用

快应用为原生渲染和webview渲染两种模式。

webview渲染模式类似小程序,这种模式uni-app已经直接支持了。
但原生渲染模式,uni-app虽然也支持,但仍然需使用快应用的组件和api而不是uni-app的组件和api。也就是需要写div而不是写view。

uni-app对原生渲染模式快应用的适配,现状如下:

  1. 在uni-app的cli版本中,提供了快应用的条件编译,在条件编译里,使用快应用的组件和api,可以直接运行和发布快应用。
  2. 如果想使用uni-app的组件和api,在快应用里运行,需要一个中间适配层。这层目前DCloud官方完成一部分组件和api的适配,其余组件和api,计划交给社区开发者解决。

欢迎各位开发者一起参与完善,让uni-app的更多组件和api,可以直接发布到快应用。

本文档为开发者参与适配更多uni组件和API的教程。

参考文档

仓库介绍

uni-app
uni-app 是一个使用 Vue.js 开发小程序、H5、App的统一前端框架。

hello quickapp
测试uni-app快应用组件及 API,已包含 button 组件、剪切板、及平台调用示例

快速体验

  1. 安装 快应用调试器

  2. 打开快应用调试器,下载平台(快应用预览版:版本号1060)

  3. 拉取 hello quickapp

    git clone https://github.com/dcloudio/hello-quickapp-native.git  
    cd ./hello-quickapp-native  
    yarn install
  4. 编译快应用 rpk

    npm run dev:quickapp-native
  5. 开启debug在线更新服务

    npm run serve:quickapp-native
  6. 打开快应用调试器,扫码安装或右上角设置服务器地址(注意带上http://,关闭USB调试可看到扫码)

    • 修改代码后,会主动通知调试器更新,或者手动点击在线更新(调试可以点击右下角开始调试)

开发

  1. Fork 仓库 uni-app https://github.com/dcloudio/uni-app,切换到 dev-quickapp 分支

  2. 源码中有2个例子,分别是 Button 组件适配示例及 clipboard API适配示例

    - button `src/platforms/quickapp-native/view/components/button`  
    - clipboard `src/platforms/quickapp-native/service/api/device/clipboard`
  3. 编译 (输出目录packages/uni-quickapp-native)

    npm run build:quickapp-native

手动替换 uni-app 编译输出目录 packages/uni-quickapp-nativehello quickapp 工程 node_modules/@dcloudio/uni-quickapp-native, 可以考虑 npm link

uni-app 目录说明

packages  
 ├─uni-quickapp-native  
 │  └─lib  
 │      ├─compiler-module (编译阶段标签转换之类逻辑)  
 │      ├─polyfill.css (全局样式差异代码)  
 │      └─manifest (manifest.json的生成逻辑)  
src  
 ├─platforms  
 │  └─quickapp-native  
 │      ├─...  
 │      ├─service  
 │      │   └─api 平台的接口实现(方案同h5,app-plus)  
 │      └─view  
 │          └─components 平台的组件实现(easycom格式,目录名与文件名一致)  
 │              └─button

提交代码

使用 pull request 提交代码

组件条件编译

<template>  
  <view>  
    <!-- #ifdef QUICKAPP-NATIVE -->  
    <button>Button</button>  
    <!-- #endif -->  
  </view>  
</template>

调用快应用平台 API

<script>  
// 剪切板,注意模块配置  
var clipboard = $app_require$("@app-module/system.clipboard");  
</script>

模块配置

src/manifest.json  

"quickapp-native": {  
    "icon": "static/logo.png",  
    "package": "com.example.demo",  
    "features": [{ "name": "system.clipboard" }] //剪切板  
}

生成证书 certificate.pemprivate.pem

安装 openssl(windows系统)

openssl req -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -out certificate.pem
  • 发布快应用时需要使用自己的证书,开发期间为debug证书

vivo 和 华为版可直接发布,见: https://ask.dcloud.net.cn/article/37182

QQ交流群:148203425

继续阅读 »

快应用为原生渲染和webview渲染两种模式。

webview渲染模式类似小程序,这种模式uni-app已经直接支持了。
但原生渲染模式,uni-app虽然也支持,但仍然需使用快应用的组件和api而不是uni-app的组件和api。也就是需要写div而不是写view。

uni-app对原生渲染模式快应用的适配,现状如下:

  1. 在uni-app的cli版本中,提供了快应用的条件编译,在条件编译里,使用快应用的组件和api,可以直接运行和发布快应用。
  2. 如果想使用uni-app的组件和api,在快应用里运行,需要一个中间适配层。这层目前DCloud官方完成一部分组件和api的适配,其余组件和api,计划交给社区开发者解决。

欢迎各位开发者一起参与完善,让uni-app的更多组件和api,可以直接发布到快应用。

本文档为开发者参与适配更多uni组件和API的教程。

参考文档

仓库介绍

uni-app
uni-app 是一个使用 Vue.js 开发小程序、H5、App的统一前端框架。

hello quickapp
测试uni-app快应用组件及 API,已包含 button 组件、剪切板、及平台调用示例

快速体验

  1. 安装 快应用调试器

  2. 打开快应用调试器,下载平台(快应用预览版:版本号1060)

  3. 拉取 hello quickapp

    git clone https://github.com/dcloudio/hello-quickapp-native.git  
    cd ./hello-quickapp-native  
    yarn install
  4. 编译快应用 rpk

    npm run dev:quickapp-native
  5. 开启debug在线更新服务

    npm run serve:quickapp-native
  6. 打开快应用调试器,扫码安装或右上角设置服务器地址(注意带上http://,关闭USB调试可看到扫码)

    • 修改代码后,会主动通知调试器更新,或者手动点击在线更新(调试可以点击右下角开始调试)

开发

  1. Fork 仓库 uni-app https://github.com/dcloudio/uni-app,切换到 dev-quickapp 分支

  2. 源码中有2个例子,分别是 Button 组件适配示例及 clipboard API适配示例

    - button `src/platforms/quickapp-native/view/components/button`  
    - clipboard `src/platforms/quickapp-native/service/api/device/clipboard`
  3. 编译 (输出目录packages/uni-quickapp-native)

    npm run build:quickapp-native

手动替换 uni-app 编译输出目录 packages/uni-quickapp-nativehello quickapp 工程 node_modules/@dcloudio/uni-quickapp-native, 可以考虑 npm link

uni-app 目录说明

packages  
 ├─uni-quickapp-native  
 │  └─lib  
 │      ├─compiler-module (编译阶段标签转换之类逻辑)  
 │      ├─polyfill.css (全局样式差异代码)  
 │      └─manifest (manifest.json的生成逻辑)  
src  
 ├─platforms  
 │  └─quickapp-native  
 │      ├─...  
 │      ├─service  
 │      │   └─api 平台的接口实现(方案同h5,app-plus)  
 │      └─view  
 │          └─components 平台的组件实现(easycom格式,目录名与文件名一致)  
 │              └─button

提交代码

使用 pull request 提交代码

组件条件编译

<template>  
  <view>  
    <!-- #ifdef QUICKAPP-NATIVE -->  
    <button>Button</button>  
    <!-- #endif -->  
  </view>  
</template>

调用快应用平台 API

<script>  
// 剪切板,注意模块配置  
var clipboard = $app_require$("@app-module/system.clipboard");  
</script>

模块配置

src/manifest.json  

"quickapp-native": {  
    "icon": "static/logo.png",  
    "package": "com.example.demo",  
    "features": [{ "name": "system.clipboard" }] //剪切板  
}

生成证书 certificate.pemprivate.pem

安装 openssl(windows系统)

openssl req -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -out certificate.pem
  • 发布快应用时需要使用自己的证书,开发期间为debug证书

vivo 和 华为版可直接发布,见: https://ask.dcloud.net.cn/article/37182

QQ交流群:148203425

收起阅读 »

HTML5+Native.js,android调用PrintShare,连接无线打印机,实现预览打印pdf文件,

HTML5+ 打印 Android Native.JS
    var path = "/test.pdf";  
    var ComponentName = plus.android.importClass('android.content.ComponentName');  
    var Intent = plus.android.importClass('android.content.Intent');  
    var Uri = plus.android.importClass('android.net.Uri');  
    var Environment = plus.android.importClass('android.os.Environment');  
    var main = plus.android.runtimeMainActivity();  

    var skRoot = plus.android.invoke(Environment.getExternalStorageDirectory(), "getPath");  

    var comp = new ComponentName("com.dynamixsoftware.printershare", "com.dynamixsoftware.printershare.ActivityPrintDocuments");  
    var intent = new Intent();  
    intent.setComponent(comp);  
    intent.setAction("android.intent.action.VIEW");  
    intent.setType(type);  
    intent.setData(Uri.parse(skRoot + path));  

    main.startActivity(intent);
继续阅读 »
    var path = "/test.pdf";  
    var ComponentName = plus.android.importClass('android.content.ComponentName');  
    var Intent = plus.android.importClass('android.content.Intent');  
    var Uri = plus.android.importClass('android.net.Uri');  
    var Environment = plus.android.importClass('android.os.Environment');  
    var main = plus.android.runtimeMainActivity();  

    var skRoot = plus.android.invoke(Environment.getExternalStorageDirectory(), "getPath");  

    var comp = new ComponentName("com.dynamixsoftware.printershare", "com.dynamixsoftware.printershare.ActivityPrintDocuments");  
    var intent = new Intent();  
    intent.setComponent(comp);  
    intent.setAction("android.intent.action.VIEW");  
    intent.setType(type);  
    intent.setData(Uri.parse(skRoot + path));  

    main.startActivity(intent);
收起阅读 »

支付宝 报 ALI38173

uniapp 支付宝

支付宝老是报 ALI38173 研究了一天都没发现到底是哪儿不对 最后发现是 uni.requestPayment orderInfo传的res 是uni.getProvider返回的res

重复了 改下就好了

继续阅读 »

支付宝老是报 ALI38173 研究了一天都没发现到底是哪儿不对 最后发现是 uni.requestPayment orderInfo传的res 是uni.getProvider返回的res

重复了 改下就好了

收起阅读 »

分享个瀑布流的写法

分享个瀑布流的写法,用了插件市场的感觉都没有太简易灵活的。
测试了下 网页/小程序/安卓的显示效果,还可以好像。

<template>  
  <div class="index-waterfall">  
    <view v-for="(column, columnIndex) of columnData" :key="columnIndex" class="column flex">  
      <view v-for="item of column" :key="item.id" class="ceil" :style="{ height: item.height }">{{ item.id }}</view>  
    </view>  
  </div>  
</template>  

<script>  
export default {  
  data() {  
    const columnNum = 2  
    return {  
      fallData: [],  
      columnData: Array(columnNum).fill('').map(() => [])  
    };  
  },  
  created() {  
    const height = ['100rpx', '150rpx', '200rpx', '125rpx', '175rpx'];  
    this.fallData = Array(50).fill('').map((item, index) => {  
      return {  
        height: height[Math.floor(Math.random() * height.length)],  
        id: index  
      };  
    });  
  },  
  mounted() {  
    this.pushItem()  
  },  
  methods: {  
    pushItem() {  
      const query = uni.createSelectorQuery().in(this)  
      query.selectAll('.column').fields({ size: true }).exec(result => {  
        const columns = result[0]  
        let minTop = columns[0].height  
        let minColumnIndex = 0  
        columns.forEach((item, index) => {  
          if (item.height < minTop) {  
            minTop = item.height  
            minColumnIndex = index  
          }  
        })  
        this.columnData[minColumnIndex].push(this.fallData.shift())  
        this.fallData.length && this.$nextTick(() => this.pushItem())  
      })  
    }  
  }  
};  
</script>  

<style lang="scss" scoped>  
.index-waterfall {  
  width: 100%;  
  display: flex;  
  justify-content: space-between;  
  align-items: flex-start;  
  .column {  
    flex: 0 0 calc(50% - 10rpx);  
    flex-direction: column;  
  }  
  .ceil {  
    width: 100%;  
    float: left;  
    margin-top: 30rpx;  
    background-color: #fff;  
  }  
}  
</style>
继续阅读 »

分享个瀑布流的写法,用了插件市场的感觉都没有太简易灵活的。
测试了下 网页/小程序/安卓的显示效果,还可以好像。

<template>  
  <div class="index-waterfall">  
    <view v-for="(column, columnIndex) of columnData" :key="columnIndex" class="column flex">  
      <view v-for="item of column" :key="item.id" class="ceil" :style="{ height: item.height }">{{ item.id }}</view>  
    </view>  
  </div>  
</template>  

<script>  
export default {  
  data() {  
    const columnNum = 2  
    return {  
      fallData: [],  
      columnData: Array(columnNum).fill('').map(() => [])  
    };  
  },  
  created() {  
    const height = ['100rpx', '150rpx', '200rpx', '125rpx', '175rpx'];  
    this.fallData = Array(50).fill('').map((item, index) => {  
      return {  
        height: height[Math.floor(Math.random() * height.length)],  
        id: index  
      };  
    });  
  },  
  mounted() {  
    this.pushItem()  
  },  
  methods: {  
    pushItem() {  
      const query = uni.createSelectorQuery().in(this)  
      query.selectAll('.column').fields({ size: true }).exec(result => {  
        const columns = result[0]  
        let minTop = columns[0].height  
        let minColumnIndex = 0  
        columns.forEach((item, index) => {  
          if (item.height < minTop) {  
            minTop = item.height  
            minColumnIndex = index  
          }  
        })  
        this.columnData[minColumnIndex].push(this.fallData.shift())  
        this.fallData.length && this.$nextTick(() => this.pushItem())  
      })  
    }  
  }  
};  
</script>  

<style lang="scss" scoped>  
.index-waterfall {  
  width: 100%;  
  display: flex;  
  justify-content: space-between;  
  align-items: flex-start;  
  .column {  
    flex: 0 0 calc(50% - 10rpx);  
    flex-direction: column;  
  }  
  .ceil {  
    width: 100%;  
    float: left;  
    margin-top: 30rpx;  
    background-color: #fff;  
  }  
}  
</style>
收起阅读 »

解决uni-app的pages.json的模块化及模块热重载的问题

uni-pages-hot-modules

uni-app的pages.json的模块化及模块热重载

解决uni-app的pages.json无法模块化的问题,并且解决模块热重载和缓存的问题

WOW!

0.1.0版本之后,直接可以使用require达到热更新,只需要引入高阶函数hot即可
废弃hotRequire方法,但是您仍可以使用,使用方式可以查看之前版本的说明

安装

npm i uni-pages-hot-modules -S

pages.json模块化及使用了uni-pages-hot-modules进行模块热重载的uni-app示例项目

注意!

  • 发现uni-app每次更新对pages.js的支持度会不同,比如某个版本竟然注释掉了对pages.js的热重载依赖,这里做了兼容。只要uni-app不推翻自己的设计,此功能长久有效
  • 使用uni-pages-hot-modules引入模块必须输入全的文件名包括后缀,否则将不会进行热重载

uni-pages-hot-modules做了什么

// 做了非常轻便的事情,相当于  
loader.addDependency(modulePath)  
delete require.cache[modulePath]  
require(modulePath)

uni-app的“彩蛋”

uni-app自带一个webpack loader钩子文件pages.js,在项目src目录下建立pages.js(与pages.json同级)即可生效(pages.json仍然需要存在,作为初始值,建议存放一些和路由无关的配置)。
pages.js要求CommonJS规范,直接通过module.exports输出一个钩子函数。

pages.js输出的函数参数

pagesJson < Object >

pages.json的解析内容

pages.js的模块化

由于是js,就可以实现模块的依赖,如果不考虑模块的热重载问题,可以不使用hot高阶函数
但是大多数情况下,需要依赖的模块也可以通过热重载更新pages.js,由于不是webpack的标准运行依赖,所以需要手动添加依赖项(使用addDependency),并且需要每次清除模块的缓存,因此uni-pages-hot-modules就诞生了

pages.js示例

const { hot } = require('uni-pages-hot-modules')  
module.exports = hot((pagesJson) => {  
    let basePages = []  
    let baseSubPackages = []  

    return {  
        // 合并pages.json的内容  
        ...pagesJson,  
        pages:[  
            ...basePages,  
            ...require('./page_modules/tabbar.js'),  
            ...require('./page_modules/component.js'),  
            ...require('./page_modules/appPlus.js'),  
            ...require('./page_modules/module1.js')  
        ],  
        subPackages:[  
            ...baseSubPackages,  
            ...require('./subpackage_modules/api.js'),  
            ...require('./subpackage_modules/extUI.js'),  
            ...require('./subpackage_modules/template.js')  
        ]  
    }  
})  

模块的规范

被加载的模块也是CommonJS规范,通过module.exports输出

module1.js示例

module.exports=[  
   {  
       "path": "pages/sub/sub",  
       "style": {  
           "navigationBarTitleText": "sub"  
       }  
   },  
   // 在模块里继续引入其他子模块  
   ...require('./some-sub-module1.js')  
]

API

context {function}

模拟webpack的require.context
与webpack不同的地方是不会将调用此方法的模块输出,没有id属性,resolve方法返回绝对路径

const files = require.context('.', true, /\.js$/)  
const modules = []  
files.keys().forEach(key => {  
    if (key === './index.js') return  
    const item = files(key)  
    modules.push(...item)  
})  
module.exports = modules

缺陷:require.context是模拟的,所以在支持热更新时也有一定缺陷,就是新创建的文件不支持热更新,需要重新编译即可(或者手动触发一次调用require.context的文件的更新也可以达到对新文件的热更新激活),删除和修改原有文件可以很好的支持热更新

其他

不支持条件编译,需要自己通过process.env.VUE_APP_PLATFORM来判断(不建议使用process.env.UNI_PLATFORM,因为在webpack客户端包里无法读取此环境变量,除非设置DefinePlugin),自定义环境的需要自己添加env变量来判断

继续阅读 »

uni-pages-hot-modules

uni-app的pages.json的模块化及模块热重载

解决uni-app的pages.json无法模块化的问题,并且解决模块热重载和缓存的问题

WOW!

0.1.0版本之后,直接可以使用require达到热更新,只需要引入高阶函数hot即可
废弃hotRequire方法,但是您仍可以使用,使用方式可以查看之前版本的说明

安装

npm i uni-pages-hot-modules -S

pages.json模块化及使用了uni-pages-hot-modules进行模块热重载的uni-app示例项目

注意!

  • 发现uni-app每次更新对pages.js的支持度会不同,比如某个版本竟然注释掉了对pages.js的热重载依赖,这里做了兼容。只要uni-app不推翻自己的设计,此功能长久有效
  • 使用uni-pages-hot-modules引入模块必须输入全的文件名包括后缀,否则将不会进行热重载

uni-pages-hot-modules做了什么

// 做了非常轻便的事情,相当于  
loader.addDependency(modulePath)  
delete require.cache[modulePath]  
require(modulePath)

uni-app的“彩蛋”

uni-app自带一个webpack loader钩子文件pages.js,在项目src目录下建立pages.js(与pages.json同级)即可生效(pages.json仍然需要存在,作为初始值,建议存放一些和路由无关的配置)。
pages.js要求CommonJS规范,直接通过module.exports输出一个钩子函数。

pages.js输出的函数参数

pagesJson < Object >

pages.json的解析内容

pages.js的模块化

由于是js,就可以实现模块的依赖,如果不考虑模块的热重载问题,可以不使用hot高阶函数
但是大多数情况下,需要依赖的模块也可以通过热重载更新pages.js,由于不是webpack的标准运行依赖,所以需要手动添加依赖项(使用addDependency),并且需要每次清除模块的缓存,因此uni-pages-hot-modules就诞生了

pages.js示例

const { hot } = require('uni-pages-hot-modules')  
module.exports = hot((pagesJson) => {  
    let basePages = []  
    let baseSubPackages = []  

    return {  
        // 合并pages.json的内容  
        ...pagesJson,  
        pages:[  
            ...basePages,  
            ...require('./page_modules/tabbar.js'),  
            ...require('./page_modules/component.js'),  
            ...require('./page_modules/appPlus.js'),  
            ...require('./page_modules/module1.js')  
        ],  
        subPackages:[  
            ...baseSubPackages,  
            ...require('./subpackage_modules/api.js'),  
            ...require('./subpackage_modules/extUI.js'),  
            ...require('./subpackage_modules/template.js')  
        ]  
    }  
})  

模块的规范

被加载的模块也是CommonJS规范,通过module.exports输出

module1.js示例

module.exports=[  
   {  
       "path": "pages/sub/sub",  
       "style": {  
           "navigationBarTitleText": "sub"  
       }  
   },  
   // 在模块里继续引入其他子模块  
   ...require('./some-sub-module1.js')  
]

API

context {function}

模拟webpack的require.context
与webpack不同的地方是不会将调用此方法的模块输出,没有id属性,resolve方法返回绝对路径

const files = require.context('.', true, /\.js$/)  
const modules = []  
files.keys().forEach(key => {  
    if (key === './index.js') return  
    const item = files(key)  
    modules.push(...item)  
})  
module.exports = modules

缺陷:require.context是模拟的,所以在支持热更新时也有一定缺陷,就是新创建的文件不支持热更新,需要重新编译即可(或者手动触发一次调用require.context的文件的更新也可以达到对新文件的热更新激活),删除和修改原有文件可以很好的支持热更新

其他

不支持条件编译,需要自己通过process.env.VUE_APP_PLATFORM来判断(不建议使用process.env.UNI_PLATFORM,因为在webpack客户端包里无法读取此环境变量,除非设置DefinePlugin),自定义环境的需要自己添加env变量来判断

收起阅读 »