HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

nvue中使用scroll-view 横向滚动隐藏滚动条

scroll_view nvue

解决方案来至微信小程序官方的野路子。
就是在scroll-view上包裹一层高度小于scroll-view的view,但是我的滚动item有阴影边框,套一层底部还是有点问题,最后我套了两层完美解决。

不能上传演示视频,大家自己去试试


<template>  
  <view class="guide">  
    <scroll-view class="guide-item" scroll-x="true">  
      <view class="item" v-for="(item, index) in list" :key="index" :style="{ 'margin-right': index + 1 == list.length ? '0rpx' : '10rpx' }">  
        <view class="item-box">  
          {{ item.name }}{{ index }}  
        </view>  

      </view>  
    </scroll-view>  
  </view>  
</template>  

<script>  
export default {  
  props: { list: Array },  
  data() {  
    return {};  
  },  
  methods: {}  
};  
</script>  

<style lang="scss" scoped>  
$guide-height: 300rpx;  

.guide {  
  height: $guide-height;  
  overflow: hidden;  
  background-color: #007AFF;  
}  

.guide-item {  
  /* #ifndef APP-NVUE */  
  display: flex;  
  /* #endif */  
  flex-direction: row;  

}  
.item {  
  background-color: #fff;  
  width: 200rpx;  
  height: $guide-height + 30;  
  overflow: hidden;  
}  

.item-box {  
  background-color: #fff;  
  width: 200rpx;  
  height: $guide-height - 10;  
  border-radius: 20rpx;  
  box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.06);  
}  
</style>  
继续阅读 »

解决方案来至微信小程序官方的野路子。
就是在scroll-view上包裹一层高度小于scroll-view的view,但是我的滚动item有阴影边框,套一层底部还是有点问题,最后我套了两层完美解决。

不能上传演示视频,大家自己去试试


<template>  
  <view class="guide">  
    <scroll-view class="guide-item" scroll-x="true">  
      <view class="item" v-for="(item, index) in list" :key="index" :style="{ 'margin-right': index + 1 == list.length ? '0rpx' : '10rpx' }">  
        <view class="item-box">  
          {{ item.name }}{{ index }}  
        </view>  

      </view>  
    </scroll-view>  
  </view>  
</template>  

<script>  
export default {  
  props: { list: Array },  
  data() {  
    return {};  
  },  
  methods: {}  
};  
</script>  

<style lang="scss" scoped>  
$guide-height: 300rpx;  

.guide {  
  height: $guide-height;  
  overflow: hidden;  
  background-color: #007AFF;  
}  

.guide-item {  
  /* #ifndef APP-NVUE */  
  display: flex;  
  /* #endif */  
  flex-direction: row;  

}  
.item {  
  background-color: #fff;  
  width: 200rpx;  
  height: $guide-height + 30;  
  overflow: hidden;  
}  

.item-box {  
  background-color: #fff;  
  width: 200rpx;  
  height: $guide-height - 10;  
  border-radius: 20rpx;  
  box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.06);  
}  
</style>  
收起阅读 »

uni-app开发中用到scss遇到的问题

在开发uni-app的过程中,样式采用scss,但是在定义lang = "scss"的时候, 控制台无情报错:


解决思路: 降级sass-loader的版本,降到8以下,可以使用。我目前使用的版本是7.3.1

继续阅读 »

在开发uni-app的过程中,样式采用scss,但是在定义lang = "scss"的时候, 控制台无情报错:


解决思路: 降级sass-loader的版本,降到8以下,可以使用。我目前使用的版本是7.3.1

收起阅读 »

uni-app使用云开发

云开发

在manifest.json中的mp-weixin

"mp-weixin": {  
    ...  
    "cloudfunctionRoot": "static/cloudfunctions/" /*指定云函数目录*/  
}

在pages.json中加上

"cloud": true

在你需要初始化的时候加上

wx.cloud.init({  
  env:'云开发的环境ID' //点击开发者工具上的 云开发->设置 就看到了  
})

然后在指定的云函数目录下创建你的函数
peopleList
index.js
package.json

index.js

const cloud = require('wx-server-sdk')  
cloud.init()  
const db = cloud.database()  
exports.main = async (event, context) => {  
  const count = await db.collection('people').get()  
  return ({  
    data: count  
  })  
}

package.js

{  
    "dependencies": {  
        "wx-server-sdk": "latest"  
    }  
}

调用

wx.cloud.callFunction({  
  name: 'peopleList',  
}).then(res=>{  
  console.log(res)  
})
继续阅读 »

在manifest.json中的mp-weixin

"mp-weixin": {  
    ...  
    "cloudfunctionRoot": "static/cloudfunctions/" /*指定云函数目录*/  
}

在pages.json中加上

"cloud": true

在你需要初始化的时候加上

wx.cloud.init({  
  env:'云开发的环境ID' //点击开发者工具上的 云开发->设置 就看到了  
})

然后在指定的云函数目录下创建你的函数
peopleList
index.js
package.json

index.js

const cloud = require('wx-server-sdk')  
cloud.init()  
const db = cloud.database()  
exports.main = async (event, context) => {  
  const count = await db.collection('people').get()  
  return ({  
    data: count  
  })  
}

package.js

{  
    "dependencies": {  
        "wx-server-sdk": "latest"  
    }  
}

调用

wx.cloud.callFunction({  
  name: 'peopleList',  
}).then(res=>{  
  console.log(res)  
})
收起阅读 »

writeBLECharacteristicValue:fail

调试蓝牙功能发送函数出现错误:{"errMsg":"writeBLECharacteristicValue:fail","errCode":10013}
跟踪调试后发现value值为空值。

暂时解决方式:把uni.writeBLECharacteristicValue替换为plus.bluetooth.writeBLECharacteristicValue
plus.bluetooth.writeBLECharacteristicValue({
deviceId: deviceId,
serviceId:serviceId,
characteristicId:characteristicId,
value: new Uint8Array([0, 0, 0]).buffer,

              success: res => {  
                console.log(JSON.stringify(res));  

              },  
              fail: res => {  
                console.log(JSON.stringify(res));  
              }  

            });  
继续阅读 »

调试蓝牙功能发送函数出现错误:{"errMsg":"writeBLECharacteristicValue:fail","errCode":10013}
跟踪调试后发现value值为空值。

暂时解决方式:把uni.writeBLECharacteristicValue替换为plus.bluetooth.writeBLECharacteristicValue
plus.bluetooth.writeBLECharacteristicValue({
deviceId: deviceId,
serviceId:serviceId,
characteristicId:characteristicId,
value: new Uint8Array([0, 0, 0]).buffer,

              success: res => {  
                console.log(JSON.stringify(res));  

              },  
              fail: res => {  
                console.log(JSON.stringify(res));  
              }  

            });  
收起阅读 »

写官方文档的 人的不负责不称职

文档

https://www.html5plus.org/doc/zh_cn/gallery.html

save
保存文件到系统相册中

void plus.gallery.save( path, successCB, errorCB );

说明:
保存文件到系统相册中。 每次仅能保存一个文件,支持图片类型(jpg/jpeg、png、bmp等格式)和视频文件(3gp、mov等格式)。 若保存的文件系统不支持,则通过errorCB返回错误信息。

请问这个说明 关键字 含糊不清 是个什么意思?

官方文档 写的 晦涩难懂,含糊不清 , 是为了防止别人使用 ?

想不通!

继续阅读 »

https://www.html5plus.org/doc/zh_cn/gallery.html

save
保存文件到系统相册中

void plus.gallery.save( path, successCB, errorCB );

说明:
保存文件到系统相册中。 每次仅能保存一个文件,支持图片类型(jpg/jpeg、png、bmp等格式)和视频文件(3gp、mov等格式)。 若保存的文件系统不支持,则通过errorCB返回错误信息。

请问这个说明 关键字 含糊不清 是个什么意思?

官方文档 写的 晦涩难懂,含糊不清 , 是为了防止别人使用 ?

想不通!

收起阅读 »

HBuilderX: 关于内置资源管理器的使用说明

内部资源管理器 HBuilderX

传统开发工具,仅仅依靠左侧的项目树来管理资源文件,便利性和效率是远远不够的。
HBuilderX内置的资源管理器,给你一个更大的资源管理界面,大幅提高文件的管理效率。

相比OS自带的资源管理器,HBuilderX资源管理器为编程文件提供专门的优化。

  • 在大图预览界面下直接显示html标题、vue页面、组件的名字
  • 直接预览markdown的内容
  • 在列表详情界面扩充单独的列来显示svn/git状态

先看一段动画,来感受下。

有哪些亮点?

  1. 进入图片目录,所有图片以缩略图模式展示。查看图片更方便
  2. vue、markdown、txt等文件,缩略图直接预览内容
  3. 列表模式,可以直观看到文件类型、大小、修改时间
  4. 缩略图模式,提供了更漂亮的文件图标
  5. 选中文件、文件夹,右键菜单,可以直接看到属性
  6. uni-app项目,创建组件、页面,更加便捷
  7. 更多功能.........

使用地址栏,返回上级目录,顶级目录

更便捷查看文件属性

选中文件,右键菜单,查看属性,无需再打开系统资源管理器

强大的文件搜索

svn/git

资源管理器内,svn项目、git项目,都可以直观看到状态。

优美直观的文件图标

uni-app项目,资源管理器内,直接新建页面

设置项

资源管理器的打开方式,默认为双击展开目录,可以自定义开启与关闭

  1. 菜单【工具】【设置】【常用配置】,可以设置资源管理器的打开方式

  2. 项目管理器右上角的设置

如何在资源管理器内使用外部命令?

有的小伙伴,希望在资源管理器内,直接压缩或解压文件;可通过外部命令实现。

配置压缩、解压的外部命令,见HBuilderX的外部命令

附版本支持情况:

  • windows:从HBuilderX 2.5.5起支持
  • mac:从HBuilderX 2.6.3起支持
继续阅读 »

传统开发工具,仅仅依靠左侧的项目树来管理资源文件,便利性和效率是远远不够的。
HBuilderX内置的资源管理器,给你一个更大的资源管理界面,大幅提高文件的管理效率。

相比OS自带的资源管理器,HBuilderX资源管理器为编程文件提供专门的优化。

  • 在大图预览界面下直接显示html标题、vue页面、组件的名字
  • 直接预览markdown的内容
  • 在列表详情界面扩充单独的列来显示svn/git状态

先看一段动画,来感受下。

有哪些亮点?

  1. 进入图片目录,所有图片以缩略图模式展示。查看图片更方便
  2. vue、markdown、txt等文件,缩略图直接预览内容
  3. 列表模式,可以直观看到文件类型、大小、修改时间
  4. 缩略图模式,提供了更漂亮的文件图标
  5. 选中文件、文件夹,右键菜单,可以直接看到属性
  6. uni-app项目,创建组件、页面,更加便捷
  7. 更多功能.........

使用地址栏,返回上级目录,顶级目录

更便捷查看文件属性

选中文件,右键菜单,查看属性,无需再打开系统资源管理器

强大的文件搜索

svn/git

资源管理器内,svn项目、git项目,都可以直观看到状态。

优美直观的文件图标

uni-app项目,资源管理器内,直接新建页面

设置项

资源管理器的打开方式,默认为双击展开目录,可以自定义开启与关闭

  1. 菜单【工具】【设置】【常用配置】,可以设置资源管理器的打开方式

  2. 项目管理器右上角的设置

如何在资源管理器内使用外部命令?

有的小伙伴,希望在资源管理器内,直接压缩或解压文件;可通过外部命令实现。

配置压缩、解压的外部命令,见HBuilderX的外部命令

附版本支持情况:

  • windows:从HBuilderX 2.5.5起支持
  • mac:从HBuilderX 2.6.3起支持
收起阅读 »

h5+ app内点击按钮实现复制功能 实现方法

移动APP

在项目中由于要实现点击按钮复制功能,
我用的是H5+APP,实现代码如下(包括安卓+IOS):

/**  
* //参数copy是要复制的文本内容    
*  tip  复制成功后的提示语,可空  
*/  
function copy_fun(copy,tips) {  
    if(!tips){  
        tips="已成功复制到剪贴板";  
    }  
    loading();  
    mui.plusReady(function() {  
        //判断是安卓还是ios  
        if (mui.os.ios) {  
            //ios  
            var UIPasteboard = plus.ios.importClass("UIPasteboard");  
            var generalPasteboard = UIPasteboard.generalPasteboard();  
            //设置/获取文本内容:  
            generalPasteboard.plusCallMethod({  
                setValue: copy,  
                forPasteboardType: "public.utf8-plain-text"  
            });  
            generalPasteboard.plusCallMethod({  
                valueForPasteboardType: "public.utf8-plain-text"  
            });  
            mui.toast(tips);  
            loading_close();  
        } else {  
            //安卓  
            var context = plus.android.importClass("android.content.Context");  
            var main = plus.android.runtimeMainActivity();  
            var clip = main.getSystemService(context.CLIPBOARD_SERVICE);  
            plus.android.invoke(clip, "setText", copy);  
            mui.toast(tips);  
            loading_close();  
        }  
    });  
}

有不明白的可留言,技术交流QQ 363384521,平时较忙,有空会回复大家

继续阅读 »

在项目中由于要实现点击按钮复制功能,
我用的是H5+APP,实现代码如下(包括安卓+IOS):

/**  
* //参数copy是要复制的文本内容    
*  tip  复制成功后的提示语,可空  
*/  
function copy_fun(copy,tips) {  
    if(!tips){  
        tips="已成功复制到剪贴板";  
    }  
    loading();  
    mui.plusReady(function() {  
        //判断是安卓还是ios  
        if (mui.os.ios) {  
            //ios  
            var UIPasteboard = plus.ios.importClass("UIPasteboard");  
            var generalPasteboard = UIPasteboard.generalPasteboard();  
            //设置/获取文本内容:  
            generalPasteboard.plusCallMethod({  
                setValue: copy,  
                forPasteboardType: "public.utf8-plain-text"  
            });  
            generalPasteboard.plusCallMethod({  
                valueForPasteboardType: "public.utf8-plain-text"  
            });  
            mui.toast(tips);  
            loading_close();  
        } else {  
            //安卓  
            var context = plus.android.importClass("android.content.Context");  
            var main = plus.android.runtimeMainActivity();  
            var clip = main.getSystemService(context.CLIPBOARD_SERVICE);  
            plus.android.invoke(clip, "setText", copy);  
            mui.toast(tips);  
            loading_close();  
        }  
    });  
}

有不明白的可留言,技术交流QQ 363384521,平时较忙,有空会回复大家

收起阅读 »

unipush_android端 集成

unipush

unipush集成文档备注

  1. 下载最新的sdk,参考 "unipush离线集成指南"集成文档(或者参考:链接).android 段代码ok;
  2. Dcloud后台开通服务:;
  3. 后台推送使用;
  4. Dcloud 代码,在最后面有个 uni-push.zip.
  5. 可能出现问题
继续阅读 »

unipush集成文档备注

  1. 下载最新的sdk,参考 "unipush离线集成指南"集成文档(或者参考:链接).android 段代码ok;
  2. Dcloud后台开通服务:;
  3. 后台推送使用;
  4. Dcloud 代码,在最后面有个 uni-push.zip.
  5. 可能出现问题
收起阅读 »

uni-AD广告联盟配置

离线打包 UniAD

> 此文档将不再维护,请移步新文档:https://nativesupport.dcloud.net.cn

配置离线打包广告支持

配置离线广告之前,需先在dcloud广告联盟申请账号。

AndroidManifest.xml文件中添加如下节点到节点中,并配置替换其中5+应用appid和广告联盟会员adid的值,因为涉及到开屏广告业务,项目工程必须以io.dcloud.PandoraEntry作为5+应用的入口Activity。该activity已包含在lib.5plus.base-release中,开发者无需实现。

<meta-data android:name="DCLOUD_AD_ID" android:value="广告标识"/>    
<meta-data android:name="DCLOUD_AD_SPLASH" android:value="true"/><!--如果不开启开屏广告则不设置此字段或者值设置为false-->    
<meta-data android:name="DCLOUD_STREAMAPP_CHANNEL" android:value="包名|应用标识|广告标识|渠道,如io.dcloud.appid|appid|adid|google" /><!--为了保证广告统计的有效性,请正确设置此值-->  
  • 包名:对应Android项目中build.gradle中的applicationId,如io.dcloud.HBuilder
  • 应用标识:对应对应5+或uni-app项目manifest.json中appid
  • 广告标识:DCloud的广告标识,开通广告后可在dev.dcloud.net.cn获取,如果没有开通广告,设置值为空即可
  • 渠道:渠道包制作指南

360聚合广告

库文件配置

将以下文件放入工程的libs目录下

路径 360聚合记错模块配置 360聚合穿山甲模块配置 360聚合广点通模块配置
SDK/libs ads-release.aar、ads-360-release.aar、torch-adcore-5.12.3140.aar open_ad_sdk.aar、torch-plcsjsdk-5.12.3140.aar torch-plgdtapi-5.12.3140.aar、torch-plgdtsdk-5.12.3140.aar

如果没有在360聚合平台申请穿山甲和广点通的广告,则对应的aar不需要添加

dcloud_properties.xml配置

features 节点添加

        <feature name="Ad" value="io.dcloud.feature.ad.AdFlowFeatureImpl">  
            <module name="360" value="io.dcloud.feature.ad.juhe360.AD360Module"/>  
        </feature>  

穿山甲广告

库文件配置

将以下文件放入工程的libs目录下

路径 文件名
SDK/libs ads-release.aar、ads-csj-release.aar、open_ad_sdk.aar

Androidmanifest.xml配置

application节点下添加

将“${applicationId}”替换成应用的包名

        <provider  
            android:name="com.bytedance.sdk.openadsdk.TTFileProvider"  
            android:authorities="${applicationId}.TTFileProvider"  
            android:exported="false"  
            android:grantUriPermissions="true">  
            <meta-data  
                android:name="android.support.FILE_PROVIDER_PATHS"  
                android:resource="@xml/file_paths"  
                tools:replace="android:resource"/>  
        </provider>  

        <provider  
            android:name="com.bytedance.sdk.openadsdk.multipro.TTMultiProvider"  
            android:authorities="${applicationId}.TTMultiProvider"  
            android:exported="false" />  

dcloud_properties.xml配置

features 节点添加

        <feature name="Ad" value="io.dcloud.feature.ad.AdFlowFeatureImpl">  
            <module name="csj" value="io.dcloud.feature.ad.csj.ADCsjModule"/>  
        </feature>  

广点通广告

库文件配置

将以下文件放入工程的libs目录下

路径 文件名
SDK/libs ads-release.aar、ads-gdt-release.aar、GDTSDK.unionNormal.4.110.980.aar

Androidmanifest.xml配置

application节点下添加

将“${applicationId}”替换成应用的包名

        <provider  
            android:name="io.dcloud.gdt.GdtFileProvider"  
            android:authorities="${applicationId}.fileprovider"  
            android:exported="false"  
            android:grantUriPermissions="true">  
            <meta-data  
                android:name="android.support.FILE_PROVIDER_PATHS"  
                android:resource="@xml/gdt_file_path"  
                tools:replace="android:resource"/>  
        </provider>  

dcloud_properties.xml配置

features 节点添加

        <feature name="Ad" value="io.dcloud.feature.ad.AdFlowFeatureImpl">  
            <module name="gdt" value="io.dcloud.feature.ad.gdt.ADGdtModule"/>  
        </feature>  

uni-AD广告联盟开通指南

继续阅读 »

> 此文档将不再维护,请移步新文档:https://nativesupport.dcloud.net.cn

配置离线打包广告支持

配置离线广告之前,需先在dcloud广告联盟申请账号。

AndroidManifest.xml文件中添加如下节点到节点中,并配置替换其中5+应用appid和广告联盟会员adid的值,因为涉及到开屏广告业务,项目工程必须以io.dcloud.PandoraEntry作为5+应用的入口Activity。该activity已包含在lib.5plus.base-release中,开发者无需实现。

<meta-data android:name="DCLOUD_AD_ID" android:value="广告标识"/>    
<meta-data android:name="DCLOUD_AD_SPLASH" android:value="true"/><!--如果不开启开屏广告则不设置此字段或者值设置为false-->    
<meta-data android:name="DCLOUD_STREAMAPP_CHANNEL" android:value="包名|应用标识|广告标识|渠道,如io.dcloud.appid|appid|adid|google" /><!--为了保证广告统计的有效性,请正确设置此值-->  
  • 包名:对应Android项目中build.gradle中的applicationId,如io.dcloud.HBuilder
  • 应用标识:对应对应5+或uni-app项目manifest.json中appid
  • 广告标识:DCloud的广告标识,开通广告后可在dev.dcloud.net.cn获取,如果没有开通广告,设置值为空即可
  • 渠道:渠道包制作指南

360聚合广告

库文件配置

将以下文件放入工程的libs目录下

路径 360聚合记错模块配置 360聚合穿山甲模块配置 360聚合广点通模块配置
SDK/libs ads-release.aar、ads-360-release.aar、torch-adcore-5.12.3140.aar open_ad_sdk.aar、torch-plcsjsdk-5.12.3140.aar torch-plgdtapi-5.12.3140.aar、torch-plgdtsdk-5.12.3140.aar

如果没有在360聚合平台申请穿山甲和广点通的广告,则对应的aar不需要添加

dcloud_properties.xml配置

features 节点添加

        <feature name="Ad" value="io.dcloud.feature.ad.AdFlowFeatureImpl">  
            <module name="360" value="io.dcloud.feature.ad.juhe360.AD360Module"/>  
        </feature>  

穿山甲广告

库文件配置

将以下文件放入工程的libs目录下

路径 文件名
SDK/libs ads-release.aar、ads-csj-release.aar、open_ad_sdk.aar

Androidmanifest.xml配置

application节点下添加

将“${applicationId}”替换成应用的包名

        <provider  
            android:name="com.bytedance.sdk.openadsdk.TTFileProvider"  
            android:authorities="${applicationId}.TTFileProvider"  
            android:exported="false"  
            android:grantUriPermissions="true">  
            <meta-data  
                android:name="android.support.FILE_PROVIDER_PATHS"  
                android:resource="@xml/file_paths"  
                tools:replace="android:resource"/>  
        </provider>  

        <provider  
            android:name="com.bytedance.sdk.openadsdk.multipro.TTMultiProvider"  
            android:authorities="${applicationId}.TTMultiProvider"  
            android:exported="false" />  

dcloud_properties.xml配置

features 节点添加

        <feature name="Ad" value="io.dcloud.feature.ad.AdFlowFeatureImpl">  
            <module name="csj" value="io.dcloud.feature.ad.csj.ADCsjModule"/>  
        </feature>  

广点通广告

库文件配置

将以下文件放入工程的libs目录下

路径 文件名
SDK/libs ads-release.aar、ads-gdt-release.aar、GDTSDK.unionNormal.4.110.980.aar

Androidmanifest.xml配置

application节点下添加

将“${applicationId}”替换成应用的包名

        <provider  
            android:name="io.dcloud.gdt.GdtFileProvider"  
            android:authorities="${applicationId}.fileprovider"  
            android:exported="false"  
            android:grantUriPermissions="true">  
            <meta-data  
                android:name="android.support.FILE_PROVIDER_PATHS"  
                android:resource="@xml/gdt_file_path"  
                tools:replace="android:resource"/>  
        </provider>  

dcloud_properties.xml配置

features 节点添加

        <feature name="Ad" value="io.dcloud.feature.ad.AdFlowFeatureImpl">  
            <module name="gdt" value="io.dcloud.feature.ad.gdt.ADGdtModule"/>  
        </feature>  

uni-AD广告联盟开通指南

收起阅读 »

uni-app h5 使用微信JSSDK的方式

微信JSSDK

综合各方经验及文档总结了以下我的使用方法,希望对有需要的同学有些帮助
第一步:npm install jweixin-module --save
第二步:common文件夹新建js文件,我这里命名jwx.js

jwx.js 文件内容

var jweixin = require('jweixin-module');  
export default {  
    //判断是否在微信中    
    isWechat: function() {  
        var ua = window.navigator.userAgent.toLowerCase();  
        if (ua.match(/micromessenger/i) == 'micromessenger') {  
            //console.log('是微信客户端')  
            return true;  
        } else {  
            //console.log('不是微信客户端')  
            return false;  
        }  
    },  
    initJssdk:function(callback){  
        var uri = encodeURIComponent(window.location.href.split('#')[0]);//获取当前url然后传递给后台获取授权和签名信息  
        uni.request({  
            url:'';//你的接口地址  
            data:{  
                url:uri  
            },  
            success:(res)=>{  
                //返回需要的参数appId,timestamp,noncestr,signature等  
                //注入config权限配置  
                jweixin.config({  
                    debug: false,  
                    appId: res.data.signPackage.appId,  
                    timestamp: res.data.signPackage.timestamp,  
                    nonceStr: res.data.signPackage.nonceStr,  
                    signature: res.data.signPackage.signature,  
                    jsApiList: [//这里是需要用到的接口名称  
                        'checkJsApi',//判断当前客户端版本是否支持指定JS接口  
                        'onMenuShareAppMessage',//分享接口  
                        'getLocation',//获取位置  
                        'openLocation',//打开位置  
                        'scanQRCode',//扫一扫接口  
                        'chooseWXPay',//微信支付  
                        'chooseImage',//拍照或从手机相册中选图接口  
                        'previewImage',//预览图片接口  
                        'uploadImage'//上传图片  
                    ]  
                });  
                if (callback) {  
                    callback(res.data);  
                }  

            }  
        })  
    },  
    //在需要定位页面调用  
    getlocation: function(callback) {  
        if (!this.isWechat()) {  
            //console.log('不是微信客户端')  
            return;  
        }  
        this.initJssdk(function(res) {  
            jweixin.ready(function() {  
                jweixin.getLocation({  
                    type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'  
                    success: function (res) {  
                        // console.log(res);  
                        callback(res)  
                    },  
                    fail:function(res){  
                        console.log(res)  
                    },  
                    // complete:function(res){  
                    //     console.log(res)  
                    // }  
                });  
            });  
        });  
    },  
    openlocation:function(data,callback){//打开位置  
        if (!this.isWechat()) {  
            //console.log('不是微信客户端')  
            return;  
        }  
        this.initJssdk(function(res) {  
            jweixin.ready(function() {  
                jweixin.openLocation({//根据传入的坐标打开地图  
                    latitude:data.latitude,  
                    longitude:data.longitude  
                });  
            });  
        });  
    },  
    chooseImage:function(callback){//选择图片  
        if (!this.isWechat()) {  
            //console.log('不是微信客户端')  
            return;  
        }  
        //console.log(data);  
        this.initJssdk(function(res) {  
            jweixin.ready(function() {  
                jweixin.chooseImage({  
                    count:1,  
                    sizeType:['compressed'],  
                    sourceType:['album'],  
                    success:function(rs){  
                        callback(rs)  
                    }  
                })  
            });  
        });  
    },  
    //微信支付  
    wxpay: function(data,callback) {  
        if (!this.isWechat()) {  
            //console.log('不是微信客户端')  
            return;  
        }  
        this.initJssdk(function(res) {  
            jweixin.ready(function() {  
                jweixin.chooseWXPay({  
                    timestamp: data.timestamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符  
                    nonceStr: data.nonceStr, // 支付签名随机串,不长于 32 位  
                    package: data.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)  
                    signType: data.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'  
                    paySign: data.paysign, // 支付签名  
                    success: function (res) {  
                        // console.log(res);  
                        callback(res)  
                    },  
                    fail:function(res){  
                        callback(res)  
                    },  
                    // complete:function(res){  
                    //     console.log(res)  
                    // }  
                });  
            });  
        });  
    }  
}  

第三步:main.js 文件里引入
import jwx from '@/common/jwx'
Vue.prototype.$jwx = jwx

第四步:在需要的页面直接用this.$jwx.xxx(接口名称)调用即可

  if (this.$jwx && this.$jwx.isWechat()) {//检查是否是微信环境  
        this.$jwx.getlocation(function (res) {//获取位置  
        console.log(res);  
                //拿到返回数据自行处理  
        });  

      //调用支付前应先处理订单信息,然后根据订单信息返回支付需要的timestamp,noncestr,package,signType,paySign等参数  
     //下面的rs.data为后台处理完订单后返回的;我的业务模式为用户点击提交订单,请求后台添加订单接口,订单添加完成后,后台根据订单id,订单金额等信息调用微信签名拿到timestamp,noncestr等参数返回;  
      this.$jwx.wxpay({//调用支付,  
        'timestamp':rs.data.timeStamp,   
        'nonceStr':rs.data.nonceStr,  
        'package':rs.data.package,  
        'signType':rs.data.signType,  
        'paysign':rs.data.paySign  
    },function (r) {  
        if (r.errMsg == 'chooseWXPay:ok') {  
            uni.redirectTo({//支付成功转到支付成功提示页面  
                url: '/pages/paySuccess  
            })  
        }else{  
            that.$msg('支付失败!');  
        }  
    });  
  }
继续阅读 »

综合各方经验及文档总结了以下我的使用方法,希望对有需要的同学有些帮助
第一步:npm install jweixin-module --save
第二步:common文件夹新建js文件,我这里命名jwx.js

jwx.js 文件内容

var jweixin = require('jweixin-module');  
export default {  
    //判断是否在微信中    
    isWechat: function() {  
        var ua = window.navigator.userAgent.toLowerCase();  
        if (ua.match(/micromessenger/i) == 'micromessenger') {  
            //console.log('是微信客户端')  
            return true;  
        } else {  
            //console.log('不是微信客户端')  
            return false;  
        }  
    },  
    initJssdk:function(callback){  
        var uri = encodeURIComponent(window.location.href.split('#')[0]);//获取当前url然后传递给后台获取授权和签名信息  
        uni.request({  
            url:'';//你的接口地址  
            data:{  
                url:uri  
            },  
            success:(res)=>{  
                //返回需要的参数appId,timestamp,noncestr,signature等  
                //注入config权限配置  
                jweixin.config({  
                    debug: false,  
                    appId: res.data.signPackage.appId,  
                    timestamp: res.data.signPackage.timestamp,  
                    nonceStr: res.data.signPackage.nonceStr,  
                    signature: res.data.signPackage.signature,  
                    jsApiList: [//这里是需要用到的接口名称  
                        'checkJsApi',//判断当前客户端版本是否支持指定JS接口  
                        'onMenuShareAppMessage',//分享接口  
                        'getLocation',//获取位置  
                        'openLocation',//打开位置  
                        'scanQRCode',//扫一扫接口  
                        'chooseWXPay',//微信支付  
                        'chooseImage',//拍照或从手机相册中选图接口  
                        'previewImage',//预览图片接口  
                        'uploadImage'//上传图片  
                    ]  
                });  
                if (callback) {  
                    callback(res.data);  
                }  

            }  
        })  
    },  
    //在需要定位页面调用  
    getlocation: function(callback) {  
        if (!this.isWechat()) {  
            //console.log('不是微信客户端')  
            return;  
        }  
        this.initJssdk(function(res) {  
            jweixin.ready(function() {  
                jweixin.getLocation({  
                    type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'  
                    success: function (res) {  
                        // console.log(res);  
                        callback(res)  
                    },  
                    fail:function(res){  
                        console.log(res)  
                    },  
                    // complete:function(res){  
                    //     console.log(res)  
                    // }  
                });  
            });  
        });  
    },  
    openlocation:function(data,callback){//打开位置  
        if (!this.isWechat()) {  
            //console.log('不是微信客户端')  
            return;  
        }  
        this.initJssdk(function(res) {  
            jweixin.ready(function() {  
                jweixin.openLocation({//根据传入的坐标打开地图  
                    latitude:data.latitude,  
                    longitude:data.longitude  
                });  
            });  
        });  
    },  
    chooseImage:function(callback){//选择图片  
        if (!this.isWechat()) {  
            //console.log('不是微信客户端')  
            return;  
        }  
        //console.log(data);  
        this.initJssdk(function(res) {  
            jweixin.ready(function() {  
                jweixin.chooseImage({  
                    count:1,  
                    sizeType:['compressed'],  
                    sourceType:['album'],  
                    success:function(rs){  
                        callback(rs)  
                    }  
                })  
            });  
        });  
    },  
    //微信支付  
    wxpay: function(data,callback) {  
        if (!this.isWechat()) {  
            //console.log('不是微信客户端')  
            return;  
        }  
        this.initJssdk(function(res) {  
            jweixin.ready(function() {  
                jweixin.chooseWXPay({  
                    timestamp: data.timestamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符  
                    nonceStr: data.nonceStr, // 支付签名随机串,不长于 32 位  
                    package: data.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)  
                    signType: data.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'  
                    paySign: data.paysign, // 支付签名  
                    success: function (res) {  
                        // console.log(res);  
                        callback(res)  
                    },  
                    fail:function(res){  
                        callback(res)  
                    },  
                    // complete:function(res){  
                    //     console.log(res)  
                    // }  
                });  
            });  
        });  
    }  
}  

第三步:main.js 文件里引入
import jwx from '@/common/jwx'
Vue.prototype.$jwx = jwx

第四步:在需要的页面直接用this.$jwx.xxx(接口名称)调用即可

  if (this.$jwx && this.$jwx.isWechat()) {//检查是否是微信环境  
        this.$jwx.getlocation(function (res) {//获取位置  
        console.log(res);  
                //拿到返回数据自行处理  
        });  

      //调用支付前应先处理订单信息,然后根据订单信息返回支付需要的timestamp,noncestr,package,signType,paySign等参数  
     //下面的rs.data为后台处理完订单后返回的;我的业务模式为用户点击提交订单,请求后台添加订单接口,订单添加完成后,后台根据订单id,订单金额等信息调用微信签名拿到timestamp,noncestr等参数返回;  
      this.$jwx.wxpay({//调用支付,  
        'timestamp':rs.data.timeStamp,   
        'nonceStr':rs.data.nonceStr,  
        'package':rs.data.package,  
        'signType':rs.data.signType,  
        'paysign':rs.data.paySign  
    },function (r) {  
        if (r.errMsg == 'chooseWXPay:ok') {  
            uni.redirectTo({//支付成功转到支付成功提示页面  
                url: '/pages/paySuccess  
            })  
        }else{  
            that.$msg('支付失败!');  
        }  
    });  
  }
收起阅读 »

uni-app map组件polyline 和markers 动态增加重绘问题

map uniapp

uni-app map组件使用polyline 和markers 动态增加多个,会发现一操作polyline 和markers对象都会重新渲染界面。
比例我先定义this.polyline = []
后面我增加this.polyline.push(....)画一条线,二条线
你会发觉每一次操作this.polyline对象都会新渲染界面,使得有很明显的界面闪动问题。

附视频(闪动问题)

继续阅读 »

uni-app map组件使用polyline 和markers 动态增加多个,会发现一操作polyline 和markers对象都会重新渲染界面。
比例我先定义this.polyline = []
后面我增加this.polyline.push(....)画一条线,二条线
你会发觉每一次操作this.polyline对象都会新渲染界面,使得有很明显的界面闪动问题。

附视频(闪动问题)

收起阅读 »