HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

android监听GPS开关

Native.JS

项目需求需要动态监听到gps开关状态,找了很多别人写的代码,最后自己成功实现这个需求,只在小米6android9系统测过可以实现,其他手机型号没测过
function on_gps_state_change(callback){
var main = plus.android.runtimeMainActivity();
var context = plus.android.importClass("android.content.Context");
var locationManager = plus.android.importClass("android.location.LocationManager");
var receiver = plus.android.implements('io.dcloud.android.content.BroadcastReceiver', {
onReceive: function(context, intent) { //实现onReceiver回调函数
plus.android.importClass(intent);
var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
result = mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER);
callback(result)
}
});
var IntentFilter = plus.android.importClass('android.content.IntentFilter');
var filter = new IntentFilter();
filter.addAction("android.location.PROVIDERS_CHANGED"); //监听蓝牙开关
main.unregisterReceiver(receiver)//;先移除监听
main.registerReceiver(receiver, filter); //注册监听
}

继续阅读 »

项目需求需要动态监听到gps开关状态,找了很多别人写的代码,最后自己成功实现这个需求,只在小米6android9系统测过可以实现,其他手机型号没测过
function on_gps_state_change(callback){
var main = plus.android.runtimeMainActivity();
var context = plus.android.importClass("android.content.Context");
var locationManager = plus.android.importClass("android.location.LocationManager");
var receiver = plus.android.implements('io.dcloud.android.content.BroadcastReceiver', {
onReceive: function(context, intent) { //实现onReceiver回调函数
plus.android.importClass(intent);
var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
result = mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER);
callback(result)
}
});
var IntentFilter = plus.android.importClass('android.content.IntentFilter');
var filter = new IntentFilter();
filter.addAction("android.location.PROVIDERS_CHANGED"); //监听蓝牙开关
main.unregisterReceiver(receiver)//;先移除监听
main.registerReceiver(receiver, filter); //注册监听
}

收起阅读 »

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>
收起阅读 »