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

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

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编译 => 安装

平台差异

快速上手

快速上手

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

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

// 隐藏再显示需要重新初始化进度条宽度
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封装的一个网络请求，在Hbuil，der中运行是完全可以的，但是我将代码引入到原生Android中，就无法获取响应数据了，希望有大佬给予指点
我个人的想法是将mui封装的网络请求制作成js插件，但是不知道怎么实现，希望有大佬给予指点

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

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

快应用为原生渲染和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文档 https://uniapp.dcloud.io/
• 快应用官网，使用 Vue开发快应用

仓库介绍

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-native 到 hello 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.pem 和 private.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

    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 研究了一天都没发现到底是哪儿不对 最后发现是 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>

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变量来判断

重大更新【文档支持在线预览示例】

抢先预览： https://www.uviewui.com

概览

历时数月开发，uView终于迎来了要和大家第一次见面的重要时刻。
uView文档和源码完全开源免费，为uniapp生态优秀、成熟的UI框架，拥有大量的组件和JS工具库，每一个组件都经过精心打磨和推敲，外观惊艳，性能优异。
uView文档异常详细，为您想好每一处细节，提供大量示例和说明，让您轻松上手，无坑可踩。

官网

网址： https://www.uviewui.com

微信小程序演示

请用微信扫码，即可体验最新版演示

关于文档

网址： https://www.uviewui.com
uView的每一个组件和JS工具，模板等，都有详细的文档说明，并且文档完美适配移动端，让您随时随地，无忧无虑的查询文档。
uView的文档有众多的示例和说明，每一处可能会踩坑的地方，都有特别说明，让您上手简单，使用无忧。

关于组件

uView为您考虑到了开发的整个生命周期，众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用：
[ Color 色彩 ] · [ Icon 图标 ] · [ Button 按钮 ] · [ Layout 布局 ] · [ Cell 单元格 ] · [ Badge 徽标数 ] · [ Tag 标签 ] · [ Keyboard 键盘 ] · [ Picker 选择器 ] · [ Rate 评分 ] · [ Search 搜索 ] · [ NumberBox 步进器 ] · [ Upload 上传 ] · [ VerificationCode 验证码倒计时 ] · [ Field 输入框 ] · [ checkbox 复选框 ] · [ Radio 单选框 ] · [ Switch 开关选择器 ] · [ Progress 进度条 ] · [ Table 表格 ] · [ CountDown 倒计时 ] · [ CountTo 数字滚动 ] · [ ActionSheet 操作菜单 ] · [ AlertTips 警告提示 ] · [ Toast 消息提示 ] · [ NoticeBar 滚动通知 ] · [ TopTips 顶部提示 ] · [ SwipeAction 滑动单元格 ] · [ Collapse 折叠面板 ] · [ Popup 弹出层 ] · [ Mask 遮罩层 ] · [ NoNetwork 无网络提示 ] · [ Grid 宫格布局 ] · [ Swiper 轮播图 ] · [ TimeLine 时间轴 ] · [ Skeleton 骨架屏 ] · [ Sticky 吸顶 ] · [ Waterfall 瀑布流 ] · [ Tabs 标签 ] · [ IndexList 索引列表 ] · [ Subsection 分段器 ] · [ Steps 步骤条 ] · [ Empty 内容为空 ] · [ Section 查看更多 ] · [ MessageInput 验证码输入 ] · [ AvatarCropper 头像裁剪 ] · [ Loadmore 加载更多 ] · [ ReadMore 展开阅读更多 ] · [ LazyLoad 懒加载 ] · [ Gap 间隔槽 ] · [ Avatar 头像 ] · [ Link 超链接 ] · [ loading 加载动画 ]

关于JS工具

uView有众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨：
[ Http 请求 ] · [ globalVariable 全局变量 ] · [ TimeFormat 时间格式化 ] · [ Route 路由跳转 ] · [ RandomArray 数组乱序 ] · [ ColorSwitch 颜色转换 ] · [ Color 颜色值 ] · [ QueryParams 对象转URL参数 ] · [ Test 规则校验 ] · [ Md5 md5加密 ] · [ Random 随机数值 ] · [ Trim 去除空格 ] · [ getRect 节点信息 ] · [ MpShare 小程序分享 ]

关于模板

uView目前已有数量众多的优秀模板，众多的模板正在陆续加入中……

开源免费

uView采用MIT许可证，您可以免费自由使用，文档和源码开源免费，不收任何费用！