HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

关于安装 less 插件 3.10.0 版本运行报错的解决方案

less

因less npm升级为3.10.0,引发了向下兼容问题。而HBuilderX自带的less插件没有锁版。导致部分使用HBuilderX的less插件的开发者无法正常编译uni-app。
目前HBuilderX的插件服务器已经升级。
之前(2019年8月17日-2019年8月18日)部分用户安装了有问题的less插件,请重新安装。

解决方案:

卸载重装 less 插件:工具->插件安装-less编译->卸载-安装

继续阅读 »

因less npm升级为3.10.0,引发了向下兼容问题。而HBuilderX自带的less插件没有锁版。导致部分使用HBuilderX的less插件的开发者无法正常编译uni-app。
目前HBuilderX的插件服务器已经升级。
之前(2019年8月17日-2019年8月18日)部分用户安装了有问题的less插件,请重新安装。

解决方案:

卸载重装 less 插件:工具->插件安装-less编译->卸载-安装

收起阅读 »

hbuilderX安装less编译插件后无法编译less样式

HBuilder X less bug确认中

hbuilderx安装less编译插件,uniapp项目运行到浏览器是报Module build failed (from ./node_modules/less-loader/dist/cjs.js): Class constructor FileManager cannot be invoked without 'new in undefined (line undefined, column undefined)。

继续阅读 »

hbuilderx安装less编译插件,uniapp项目运行到浏览器是报Module build failed (from ./node_modules/less-loader/dist/cjs.js): Class constructor FileManager cannot be invoked without 'new in undefined (line undefined, column undefined)。

收起阅读 »

关于 uni-app 内使用 websocket 后导致安卓白屏的解决方案

白屏 WEBSOCKET

部分安卓设备使用 websocket 后导致出现启动白屏,可以尝试以下临时解决方案:

继续阅读 »

部分安卓设备使用 websocket 后导致出现启动白屏,可以尝试以下临时解决方案:

收起阅读 »

UNIAPP兼职接外包QQ群:47323557 欢迎大家加入

外包

为了方便大家交流,我创建了一个uniapp接单的QQ群,欢迎 大家加入
群号:47323557

为了方便大家交流,我创建了一个uniapp接单的QQ群,欢迎 大家加入
群号:47323557

uni-app微信小程序接入人脸核身SDK

uniapp SDK 微信小程序

原文记录地址:点击前往

image

这几天使用uni-app开发某银行的一个微信小程序,需要集成接入腾讯云的人脸核身SDK,如上图所示,记录下整合接入过程及踩的一些坑,帮助后面需要的朋友们。关于uni-app接入人脸核身SDK有不懂的地方可以在下面提问,看到会及时回复。

申请服务

不是所有的企业都能够申请的,需要符合以下行业要求的客户才能申请
政务:政府机构或事业单位
金融:银行、保险
医疗:公立医疗机构
运营商:电信运营商
教育:公立教育机构
交通:航空、客运、网约车、交通卡、共享交通、轨道交通、租车
旅游:酒店
物流:快递、邮政、物流
由于SDK会调用小程序原生的wx.startFacialRecognitionVerify方法,所以总共得申请2个服务:
SDK服务申请人脸核身服务
小程序查看申请流程(需要发送邮件申请,使用该服务的小程序的appid,后面开发也是用的这个)
重要的事情说3遍

以上这2个服务都需要申请,缺一不可。
以上这2个服务都需要申请,缺一不可。
以上这2个服务都需要申请,缺一不可。

下载SDK

由于不是我申请的,所以怎么下载我也不知道,听群里的人说的是SDK腾讯云下发给客户的。

SDK目录结构

image

SDK接入

参考腾讯云文档的接入方法:https://cloud.tencent.com/document/product/1007/31071
文档是针对原生小程序写的,所以页面引入的方法有所不同
由于uni-app不支持直接引入小程序的原生页面,所以这里能想到的就是将它当作成一个微信小程序的组件,然后uni-app的页面引入这个组件

解压引入SDK

在uni-app项目中新建wxcomponents目录,将SDK解压后放到该目录

image

pages.jsonglobalStyle中全局引入小程序的组件,注意引用的路径

"usingComponents": {  
  "verify-mpsdk": "/wxcomponents/verify_mpsdk/index/index"  
}

image

新建人脸核身页面

pages中新建人脸核身的页面face(名字可以随意,根据自己的需要起名),
pages.json中配置页面

image

face页面中引入verify-mpsdk组件

image

最终的人脸核身的页面访问就是/pages/face/face

初始化SDK

在需要的页面初始化SDK,如有个页面需要点击按钮进行人脸核身,就在这个页面进行初始化。
这个直接照着文档快速入门中的来就行了,这里就直接使用uni-app默认的index页面,
适当修改下即可,大概代码如下:

<template>  
  <view class="content">  
    <button type="primary"  
      @tap="gotoVerify">  
      进入人脸核身  
    </button>  
  </view>  
</template>  
<script>  
  export default {  
    data() {  
      return {  
          BizToken: ''  
      }  
    },  
    onLoad() {  
      // 初始化慧眼实名核身组件  
      const Verify = require('@/wxcomponents/verify_mpsdk/main.js')  
      Verify.init()  
    },  
    methods: {  
      // 单击进入人脸核身按钮时,触发该函数  
      gotoVerify () {  
        this.BizToken = '' // 这里需要我们去客户后端调用DetectAuth接口获取BizToken  
        // 调用实名核身功能  
        wx.startVerify({  
          data: {  
            token: this.BizToken // BizToken  
          },  
          success: (res) => { // 验证成功后触发  
            // res 包含验证成功的token, 这里需要加500ms延时,防止iOS下不执行后面的逻辑  
            setTimeout(() => {  
                // 验证成功后,拿到token后的逻辑处理,具体以客户自身逻辑为准  
                console.log(res)  
            }, 500)  
          },  
          fail: (err) => {  // 验证失败时触发  
            // err 包含错误码,错误信息,弹窗提示错误  
            setTimeout(() => {  
              console.log(err)  
              wx.showModal({  
                  title: "提示",  
                  content: err.ErrorMsg,  
                  showCancel: false  
              })  
            }, 500)  
          }  
        })  
      }  
    }  
  }  
</script>

注意下这里的BizToken,需要调用后端服务接口来获取,
需要后端的同学调用腾讯云提供的DetectAuth来返回前端需要的BizToken
调试开发阶段我们可以先通过腾讯云提供的工具
API 3.0 Explorer
直接来获取这个BizToken
如果服务申请成功后控制台一般能找到SecretIdSecretKeyRuleId
注意EndpointRegion选择的地区得保持和申请时选择的地区一致。
填写完成后点击在线调用中的发送请求按钮,如果填的都对的话返回信息里面会有BizToken
拿到BizToken后就可以直接使用了,修改下上面的代码:
xxxxxxxxxxxxxxxxx就是拿到的BizToken

  this.BizToken = 'xxxxxxxxxxxxxxxxx' // 这里需要我们去客户后端调用DetectAuth接口获取BizToken

image

开发调试

上面都做完后就可以进行调试了
需要先在项目中manifest.json中配置上小程序的appid,这个appid就是上面申请服务中的appid,不然无法开启调试。

image

然后运行到微信开发工具(这里就不多说了),如果提示不是开发人员,就让该appid的管理员将你加到开发组里面就行了。
运行成功后点击开发者工具的真机调试,扫描二维码开启真机调试模式。
接下来就是踩坑了,会出现各种问题。

踩坑及解决方法

Component is not found in path

这里开发者工具里面都是显示正常的,不会报这个错,
手机扫码进入调试后控制台会出现这个报错,
提示组件找不到,但是我们的路径都是对的,
Component is not found in path "wxcomponents/verify_mpsdk/index/index"

image

问题出在这里将verify_mpsdk当成自定义组件了,
小程序自定义组件引入的时候需要在文件JSON中指定"component": true
找到wxcomponents\verify_mpsdk\index\index.json文件,加入"component": true即可
重新开启调试扫码后上面的报错就没了。

image

navigateTo:fail page

点击按钮调用gotoVerify后会报一个页面找不到的错
navigateTo:fail page "verify_mpsdk/index/index?isNotice=false" is not found

image

SDK默认的是跳转验证页面的地址是verify_mpsdk/index/index
文档找了半天也没找到相应的配置地址,最后在SDK里面搜索找到了这个地址。
所以只需要把这个地址改成我们所需要的地址就行了。
找到wxcomponents\verify_mpsdk\main.js,里面搜索verify_mpsdk/index/index,
找到后修改成上面人脸核身页面的地址pages/face/face
保存后重试就能跳转到人脸核身的页面了。

无操作、无报错大坑

进入人脸核身的页面后会发现啥操作都没,控制台也没报错

image

一度认为我自己弄的有问题,搞了好久也没弄好,也提了个工单(腾讯云工单反馈率还是很快的,几分钟后就有人回复了,这点赞一个),
将代码和相关操作在工单里描述了下,对方也觉得的没问题,按照快速入门的代码应该是没问题的,
对方也没找到啥问题,就让我加了一个腾讯云慧眼小助手的微信,
本想着下午加人家看看啥问题的,中午吃完饭闲着的时候将SDK里面的文件都格式化后终于在index.js里面找到问题所在了。
wxcomponents\verify_mpsdk\index\index.js文件中有个onLoad生命周期,

image

正常原生微信小程序进入到这个页面的时候会执行onLoad里面的代码,
但是我们上面将这个SDK当作是一个自定义组件了,
在uni-app中组件是不存在onLoad这个生命周期的,这个是页面所属的生命周期。
找到问题所在就好解决了,我们可以在人脸核身的页面pages/face/face手动执行onLoad
修改下pages/face/face的代码,如下:

<template>  
  <view class="face">  
    <verify-mpsdk ref="verifyMpsdk"></verify-mpsdk>  
  </view>  
</template>  

<script>  
  export default {  
    data() {  
        return {  

        }  
    },  
    onLoad(i) {  
        // 页面onLoad的时候手动调用  
        this.$refs.verifyMpsdk.onLoad(i)  
    }  
  }  
</script>

保存后重试,就能正常显示了

image

SDK图片异常

点击快速验证进入下一步及后面的步骤的时候发现,页面的图片都挂掉了不显示,
一开始我一直用的真机调试,页面上也不会出现破图,控制台也不会报图片异常的错误,
导致我不知道怎么进行拍摄身份证,以为会自动识别身份证然后自动下一步,
最后在开发者工具里面跑了一遍才知道是图片找不到了,然后拍照的图片按钮自然也就显示不了了。

image

image

最后在SDK里面搜索/verify_mpsdk/images,在下面文件中找到关键词,
wxcomponents\verify_mpsdk\templates\ocr\ocr.wxml

image

既然这种形式导致运行的时候图片找不到,我们可以把SDK所用的图片都复制到项目的static目录里
static中新建verify_mpsdk目录,将SDK中的图片即wxcomponents\verify_mpsdk\images
复制到static\verify_mpsdk中,最终形成以下目录形式

image

最后将wxcomponents\verify_mpsdk\templates\ocr\ocr.wxml中的/verify_mpsdk/images批量替换成
/static/verify_mpsdk/images后重试即可,然后就都正常了。

image

image

完整流程

最后用真机调试完整跑一把

image

image

image

image

备注:如果最上面的wx.startFacialRecognitionVerify服务没有申请到此时点击下一步的会弹出一个无权限的弹窗无法进行下一步

image

image

这里就是活体人脸检测了,需要将脸对准框框,点击开始后需要读几个数字,

image

最后验证通过后会回到之前的页面(调用gotoVerify()方法的页面), 验证成功后,会拿到一个BizToken
可以在wx.startVerify回调函数success中打印自行查看。
拿到BizToken后可以调用后端的接口,后端通过调用 GetDetectInfo 接口获取并返回本次核身的详细信息,包括身份证上的信息和身份证证图片等信息。
前端拿到这些信息后根据自己的程序需要做处理。

结语

整合过程中遇到不少问题,百度加google也找不到相关的详细信息,
人脸核身的相关文档都很简单,出现问题后无从下手,只能慢慢自己摸索解决了,
最后写篇文章记录下整个过程,也能帮到后面需要集成这个SDK的朋友们。

继续阅读 »

原文记录地址:点击前往

image

这几天使用uni-app开发某银行的一个微信小程序,需要集成接入腾讯云的人脸核身SDK,如上图所示,记录下整合接入过程及踩的一些坑,帮助后面需要的朋友们。关于uni-app接入人脸核身SDK有不懂的地方可以在下面提问,看到会及时回复。

申请服务

不是所有的企业都能够申请的,需要符合以下行业要求的客户才能申请
政务:政府机构或事业单位
金融:银行、保险
医疗:公立医疗机构
运营商:电信运营商
教育:公立教育机构
交通:航空、客运、网约车、交通卡、共享交通、轨道交通、租车
旅游:酒店
物流:快递、邮政、物流
由于SDK会调用小程序原生的wx.startFacialRecognitionVerify方法,所以总共得申请2个服务:
SDK服务申请人脸核身服务
小程序查看申请流程(需要发送邮件申请,使用该服务的小程序的appid,后面开发也是用的这个)
重要的事情说3遍

以上这2个服务都需要申请,缺一不可。
以上这2个服务都需要申请,缺一不可。
以上这2个服务都需要申请,缺一不可。

下载SDK

由于不是我申请的,所以怎么下载我也不知道,听群里的人说的是SDK腾讯云下发给客户的。

SDK目录结构

image

SDK接入

参考腾讯云文档的接入方法:https://cloud.tencent.com/document/product/1007/31071
文档是针对原生小程序写的,所以页面引入的方法有所不同
由于uni-app不支持直接引入小程序的原生页面,所以这里能想到的就是将它当作成一个微信小程序的组件,然后uni-app的页面引入这个组件

解压引入SDK

在uni-app项目中新建wxcomponents目录,将SDK解压后放到该目录

image

pages.jsonglobalStyle中全局引入小程序的组件,注意引用的路径

"usingComponents": {  
  "verify-mpsdk": "/wxcomponents/verify_mpsdk/index/index"  
}

image

新建人脸核身页面

pages中新建人脸核身的页面face(名字可以随意,根据自己的需要起名),
pages.json中配置页面

image

face页面中引入verify-mpsdk组件

image

最终的人脸核身的页面访问就是/pages/face/face

初始化SDK

在需要的页面初始化SDK,如有个页面需要点击按钮进行人脸核身,就在这个页面进行初始化。
这个直接照着文档快速入门中的来就行了,这里就直接使用uni-app默认的index页面,
适当修改下即可,大概代码如下:

<template>  
  <view class="content">  
    <button type="primary"  
      @tap="gotoVerify">  
      进入人脸核身  
    </button>  
  </view>  
</template>  
<script>  
  export default {  
    data() {  
      return {  
          BizToken: ''  
      }  
    },  
    onLoad() {  
      // 初始化慧眼实名核身组件  
      const Verify = require('@/wxcomponents/verify_mpsdk/main.js')  
      Verify.init()  
    },  
    methods: {  
      // 单击进入人脸核身按钮时,触发该函数  
      gotoVerify () {  
        this.BizToken = '' // 这里需要我们去客户后端调用DetectAuth接口获取BizToken  
        // 调用实名核身功能  
        wx.startVerify({  
          data: {  
            token: this.BizToken // BizToken  
          },  
          success: (res) => { // 验证成功后触发  
            // res 包含验证成功的token, 这里需要加500ms延时,防止iOS下不执行后面的逻辑  
            setTimeout(() => {  
                // 验证成功后,拿到token后的逻辑处理,具体以客户自身逻辑为准  
                console.log(res)  
            }, 500)  
          },  
          fail: (err) => {  // 验证失败时触发  
            // err 包含错误码,错误信息,弹窗提示错误  
            setTimeout(() => {  
              console.log(err)  
              wx.showModal({  
                  title: "提示",  
                  content: err.ErrorMsg,  
                  showCancel: false  
              })  
            }, 500)  
          }  
        })  
      }  
    }  
  }  
</script>

注意下这里的BizToken,需要调用后端服务接口来获取,
需要后端的同学调用腾讯云提供的DetectAuth来返回前端需要的BizToken
调试开发阶段我们可以先通过腾讯云提供的工具
API 3.0 Explorer
直接来获取这个BizToken
如果服务申请成功后控制台一般能找到SecretIdSecretKeyRuleId
注意EndpointRegion选择的地区得保持和申请时选择的地区一致。
填写完成后点击在线调用中的发送请求按钮,如果填的都对的话返回信息里面会有BizToken
拿到BizToken后就可以直接使用了,修改下上面的代码:
xxxxxxxxxxxxxxxxx就是拿到的BizToken

  this.BizToken = 'xxxxxxxxxxxxxxxxx' // 这里需要我们去客户后端调用DetectAuth接口获取BizToken

image

开发调试

上面都做完后就可以进行调试了
需要先在项目中manifest.json中配置上小程序的appid,这个appid就是上面申请服务中的appid,不然无法开启调试。

image

然后运行到微信开发工具(这里就不多说了),如果提示不是开发人员,就让该appid的管理员将你加到开发组里面就行了。
运行成功后点击开发者工具的真机调试,扫描二维码开启真机调试模式。
接下来就是踩坑了,会出现各种问题。

踩坑及解决方法

Component is not found in path

这里开发者工具里面都是显示正常的,不会报这个错,
手机扫码进入调试后控制台会出现这个报错,
提示组件找不到,但是我们的路径都是对的,
Component is not found in path "wxcomponents/verify_mpsdk/index/index"

image

问题出在这里将verify_mpsdk当成自定义组件了,
小程序自定义组件引入的时候需要在文件JSON中指定"component": true
找到wxcomponents\verify_mpsdk\index\index.json文件,加入"component": true即可
重新开启调试扫码后上面的报错就没了。

image

navigateTo:fail page

点击按钮调用gotoVerify后会报一个页面找不到的错
navigateTo:fail page "verify_mpsdk/index/index?isNotice=false" is not found

image

SDK默认的是跳转验证页面的地址是verify_mpsdk/index/index
文档找了半天也没找到相应的配置地址,最后在SDK里面搜索找到了这个地址。
所以只需要把这个地址改成我们所需要的地址就行了。
找到wxcomponents\verify_mpsdk\main.js,里面搜索verify_mpsdk/index/index,
找到后修改成上面人脸核身页面的地址pages/face/face
保存后重试就能跳转到人脸核身的页面了。

无操作、无报错大坑

进入人脸核身的页面后会发现啥操作都没,控制台也没报错

image

一度认为我自己弄的有问题,搞了好久也没弄好,也提了个工单(腾讯云工单反馈率还是很快的,几分钟后就有人回复了,这点赞一个),
将代码和相关操作在工单里描述了下,对方也觉得的没问题,按照快速入门的代码应该是没问题的,
对方也没找到啥问题,就让我加了一个腾讯云慧眼小助手的微信,
本想着下午加人家看看啥问题的,中午吃完饭闲着的时候将SDK里面的文件都格式化后终于在index.js里面找到问题所在了。
wxcomponents\verify_mpsdk\index\index.js文件中有个onLoad生命周期,

image

正常原生微信小程序进入到这个页面的时候会执行onLoad里面的代码,
但是我们上面将这个SDK当作是一个自定义组件了,
在uni-app中组件是不存在onLoad这个生命周期的,这个是页面所属的生命周期。
找到问题所在就好解决了,我们可以在人脸核身的页面pages/face/face手动执行onLoad
修改下pages/face/face的代码,如下:

<template>  
  <view class="face">  
    <verify-mpsdk ref="verifyMpsdk"></verify-mpsdk>  
  </view>  
</template>  

<script>  
  export default {  
    data() {  
        return {  

        }  
    },  
    onLoad(i) {  
        // 页面onLoad的时候手动调用  
        this.$refs.verifyMpsdk.onLoad(i)  
    }  
  }  
</script>

保存后重试,就能正常显示了

image

SDK图片异常

点击快速验证进入下一步及后面的步骤的时候发现,页面的图片都挂掉了不显示,
一开始我一直用的真机调试,页面上也不会出现破图,控制台也不会报图片异常的错误,
导致我不知道怎么进行拍摄身份证,以为会自动识别身份证然后自动下一步,
最后在开发者工具里面跑了一遍才知道是图片找不到了,然后拍照的图片按钮自然也就显示不了了。

image

image

最后在SDK里面搜索/verify_mpsdk/images,在下面文件中找到关键词,
wxcomponents\verify_mpsdk\templates\ocr\ocr.wxml

image

既然这种形式导致运行的时候图片找不到,我们可以把SDK所用的图片都复制到项目的static目录里
static中新建verify_mpsdk目录,将SDK中的图片即wxcomponents\verify_mpsdk\images
复制到static\verify_mpsdk中,最终形成以下目录形式

image

最后将wxcomponents\verify_mpsdk\templates\ocr\ocr.wxml中的/verify_mpsdk/images批量替换成
/static/verify_mpsdk/images后重试即可,然后就都正常了。

image

image

完整流程

最后用真机调试完整跑一把

image

image

image

image

备注:如果最上面的wx.startFacialRecognitionVerify服务没有申请到此时点击下一步的会弹出一个无权限的弹窗无法进行下一步

image

image

这里就是活体人脸检测了,需要将脸对准框框,点击开始后需要读几个数字,

image

最后验证通过后会回到之前的页面(调用gotoVerify()方法的页面), 验证成功后,会拿到一个BizToken
可以在wx.startVerify回调函数success中打印自行查看。
拿到BizToken后可以调用后端的接口,后端通过调用 GetDetectInfo 接口获取并返回本次核身的详细信息,包括身份证上的信息和身份证证图片等信息。
前端拿到这些信息后根据自己的程序需要做处理。

结语

整合过程中遇到不少问题,百度加google也找不到相关的详细信息,
人脸核身的相关文档都很简单,出现问题后无从下手,只能慢慢自己摸索解决了,
最后写篇文章记录下整个过程,也能帮到后面需要集成这个SDK的朋友们。

收起阅读 »

如何解决在uni-app使用mpvue-echarts报this.echarts.setCanvasCreator is not a function的错误

mpvue 小程序 uniapp

注意::此方法本人仅用在微信小程序,其他端没有测试,h5测试用不了

  1. 安装依赖
    npm install echarts mpvue-echarts

  2. 找到mpvue-echarts模块里的echarts文件,找到相应代码覆盖即可,替换如下

    <template>  
    <canvas  
    v-if="canvasId"  
    class="ec-canvas"  
    :id="canvasId"  
    :canvasId="canvasId"  
    @touchstart="touchStart"  
    @touchmove="touchMove"  
    @touchend="touchEnd"  
    @error="error"  
    ></canvas>  
    </template>  
    <script>  
    import WxCanvas from "./wx-canvas";  
    export default {  
    props: {  
    canvasId: {  
      type: String,  
      default: "ec-canvas"  
    },  
    lazyLoad: {  
      type: Boolean,  
      default: false  
    },  
    disableTouch: {  
      type: Boolean,  
      default: false  
    },  
    throttleTouch: {  
      type: Boolean,  
      default: false  
    }  
    },  
    // #ifdef H5  
    mounted() {  
    if (!this.lazyLoad) this.init();  
    },  
    // #endif  
    // #ifndef H5  
    onReady() {  
    if (!this.lazyLoad) this.init();  
    },  
    // #endif  
    methods: {  
    setChart(chart) {  
      this.chart = chart;  
    },  
    init() {  
      const { canvasId } = this;  
      this.ctx = wx.createCanvasContext(canvasId, this);  
      this.canvas = new WxCanvas(this.ctx, canvasId);  
      const query = wx.createSelectorQuery().in(this);  
      query  
        .select(`#${canvasId}`)  
        .boundingClientRect(res => {  
          if (!res) {  
            setTimeout(() => this.init(), 50);  
            return;  
          }  
          this.$emit("onInit", {  
            width: res.width,  
            height: res.height  
          });  
        })  
        .exec();  
    },  
    canvasToTempFilePath(opt) {  
      const { canvasId } = this;  
      this.ctx.draw(true, () => {  
        wx.canvasToTempFilePath({  
          canvasId,  
          ...opt  
        });  
      });  
    },  
    touchStart(e) {  
      const { disableTouch, chart } = this;  
      if (disableTouch || !chart || !e.mp.touches.length) return;  
      const touch = e.mp.touches[0];  
      chart._zr.handler.dispatch("mousedown", {  
        zrX: touch.x,  
        zrY: touch.y  
      });  
      chart._zr.handler.dispatch("mousemove", {  
        zrX: touch.x,  
        zrY: touch.y  
      });  
    },  
    touchMove(e) {  
      const { disableTouch, throttleTouch, chart, lastMoveTime } = this;  
      if (disableTouch || !chart || !e.mp.touches.length) return;  
      if (throttleTouch) {  
        const currMoveTime = Date.now();  
        if (currMoveTime - lastMoveTime < 240) return;  
        this.lastMoveTime = currMoveTime;  
      }  
      const touch = e.mp.touches[0];  
      chart._zr.handler.dispatch("mousemove", {  
        zrX: touch.x,  
        zrY: touch.y  
      });  
    },  
    touchEnd(e) {  
      const { disableTouch, chart } = this;  
      if (disableTouch || !chart) return;  
      const touch = e.mp.changedTouches ? e.mp.changedTouches[0] : {};  
      chart._zr.handler.dispatch("mouseup", {  
        zrX: touch.x,  
        zrY: touch.y  
      });  
      chart._zr.handler.dispatch("click", {  
        zrX: touch.x,  
        zrY: touch.y  
      });  
    }  
    }  
    };  
    </script>  
    <style scoped>  
    .ec-canvas {  
    width: 100%;  
    height: 100%;  
    flex: 1;  
    }  
    </style>

    3.图表示例文件

    <template>  
    <view class="materials">  
    <view class="echarts-wrap">  
      <mpvue-echarts class="ec-canvas" @onInit="onInit" canvasId="demo-canvas" ref="chart1" />  
    </view>  
    <button @click="changeChart">更改</button>  
    </view>  
    </template>  
    
    <script>  
    import * as echarts from "echarts/dist/echarts.min";  
    import mpvueEcharts from "mpvue-echarts";  
    function getDate(date) {  
    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;  
    }  
    let chart1 = null;  
    export default {  
    components: {  
    mpvueEcharts  
    },  
    data() {  
    return {};  
    },  
    onReady() {},  
    methods: {  
    changeChart() {  
      chart1.setOption(this.getOptions(10, 30));  
    },  
    getOptions(nan, nv) {  
      return {  
        title: {  
          text: "性别比例",  
          x: "center",  
          textStyle: {  
            fontSize: 16  
          }  
        },  
        backgroundColor: "#FFF",  
        tooltip: {  
          trigger: "axis",  
          axisPointer: {  
            // 坐标轴指示器,坐标轴触发有效  
            type: "shadow" // 默认为直线,可选为:'line' | 'shadow'  
          }  
        },  
        xAxis: { type: "value", splitNumber: 7 },  
        yAxis: { type: "category", show: false, data: [getDate(new Date())] },  
        series: [  
          {  
            name: "男",  
            type: "bar",  
            stack: "总量",  
            data: [nan],  
            barWidth: 50,  
            itemStyle: { normal: { color: "#00aaff" } }  
          },  
          {  
            name: "女",  
            type: "bar",  
            stack: "总量",  
            data: [nv],  
            itemStyle: { normal: { color: "#f4516c" } }  
          }  
        ]  
      };  
    },  
    onInit(e) {  
      let { width, height } = e;  
      let canvas = this.$refs.chart1.canvas;  
      echarts.setCanvasCreator(() => canvas);  
      chart1 = echarts.init(canvas, null, {  
        width: width,  
        height: height  
      });  
      canvas.setChart(chart1);  
      chart1.setOption(this.getOptions(50, 10));  
      this.$refs.chart1.setChart(chart1);  
    }  
    }  
    };  
    </script>  
    <style>  
    .echarts-wrap {  
    width: 100%;  
    height: 300px;  
    }  
    </style>
继续阅读 »

注意::此方法本人仅用在微信小程序,其他端没有测试,h5测试用不了

  1. 安装依赖
    npm install echarts mpvue-echarts

  2. 找到mpvue-echarts模块里的echarts文件,找到相应代码覆盖即可,替换如下

    <template>  
    <canvas  
    v-if="canvasId"  
    class="ec-canvas"  
    :id="canvasId"  
    :canvasId="canvasId"  
    @touchstart="touchStart"  
    @touchmove="touchMove"  
    @touchend="touchEnd"  
    @error="error"  
    ></canvas>  
    </template>  
    <script>  
    import WxCanvas from "./wx-canvas";  
    export default {  
    props: {  
    canvasId: {  
      type: String,  
      default: "ec-canvas"  
    },  
    lazyLoad: {  
      type: Boolean,  
      default: false  
    },  
    disableTouch: {  
      type: Boolean,  
      default: false  
    },  
    throttleTouch: {  
      type: Boolean,  
      default: false  
    }  
    },  
    // #ifdef H5  
    mounted() {  
    if (!this.lazyLoad) this.init();  
    },  
    // #endif  
    // #ifndef H5  
    onReady() {  
    if (!this.lazyLoad) this.init();  
    },  
    // #endif  
    methods: {  
    setChart(chart) {  
      this.chart = chart;  
    },  
    init() {  
      const { canvasId } = this;  
      this.ctx = wx.createCanvasContext(canvasId, this);  
      this.canvas = new WxCanvas(this.ctx, canvasId);  
      const query = wx.createSelectorQuery().in(this);  
      query  
        .select(`#${canvasId}`)  
        .boundingClientRect(res => {  
          if (!res) {  
            setTimeout(() => this.init(), 50);  
            return;  
          }  
          this.$emit("onInit", {  
            width: res.width,  
            height: res.height  
          });  
        })  
        .exec();  
    },  
    canvasToTempFilePath(opt) {  
      const { canvasId } = this;  
      this.ctx.draw(true, () => {  
        wx.canvasToTempFilePath({  
          canvasId,  
          ...opt  
        });  
      });  
    },  
    touchStart(e) {  
      const { disableTouch, chart } = this;  
      if (disableTouch || !chart || !e.mp.touches.length) return;  
      const touch = e.mp.touches[0];  
      chart._zr.handler.dispatch("mousedown", {  
        zrX: touch.x,  
        zrY: touch.y  
      });  
      chart._zr.handler.dispatch("mousemove", {  
        zrX: touch.x,  
        zrY: touch.y  
      });  
    },  
    touchMove(e) {  
      const { disableTouch, throttleTouch, chart, lastMoveTime } = this;  
      if (disableTouch || !chart || !e.mp.touches.length) return;  
      if (throttleTouch) {  
        const currMoveTime = Date.now();  
        if (currMoveTime - lastMoveTime < 240) return;  
        this.lastMoveTime = currMoveTime;  
      }  
      const touch = e.mp.touches[0];  
      chart._zr.handler.dispatch("mousemove", {  
        zrX: touch.x,  
        zrY: touch.y  
      });  
    },  
    touchEnd(e) {  
      const { disableTouch, chart } = this;  
      if (disableTouch || !chart) return;  
      const touch = e.mp.changedTouches ? e.mp.changedTouches[0] : {};  
      chart._zr.handler.dispatch("mouseup", {  
        zrX: touch.x,  
        zrY: touch.y  
      });  
      chart._zr.handler.dispatch("click", {  
        zrX: touch.x,  
        zrY: touch.y  
      });  
    }  
    }  
    };  
    </script>  
    <style scoped>  
    .ec-canvas {  
    width: 100%;  
    height: 100%;  
    flex: 1;  
    }  
    </style>

    3.图表示例文件

    <template>  
    <view class="materials">  
    <view class="echarts-wrap">  
      <mpvue-echarts class="ec-canvas" @onInit="onInit" canvasId="demo-canvas" ref="chart1" />  
    </view>  
    <button @click="changeChart">更改</button>  
    </view>  
    </template>  
    
    <script>  
    import * as echarts from "echarts/dist/echarts.min";  
    import mpvueEcharts from "mpvue-echarts";  
    function getDate(date) {  
    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;  
    }  
    let chart1 = null;  
    export default {  
    components: {  
    mpvueEcharts  
    },  
    data() {  
    return {};  
    },  
    onReady() {},  
    methods: {  
    changeChart() {  
      chart1.setOption(this.getOptions(10, 30));  
    },  
    getOptions(nan, nv) {  
      return {  
        title: {  
          text: "性别比例",  
          x: "center",  
          textStyle: {  
            fontSize: 16  
          }  
        },  
        backgroundColor: "#FFF",  
        tooltip: {  
          trigger: "axis",  
          axisPointer: {  
            // 坐标轴指示器,坐标轴触发有效  
            type: "shadow" // 默认为直线,可选为:'line' | 'shadow'  
          }  
        },  
        xAxis: { type: "value", splitNumber: 7 },  
        yAxis: { type: "category", show: false, data: [getDate(new Date())] },  
        series: [  
          {  
            name: "男",  
            type: "bar",  
            stack: "总量",  
            data: [nan],  
            barWidth: 50,  
            itemStyle: { normal: { color: "#00aaff" } }  
          },  
          {  
            name: "女",  
            type: "bar",  
            stack: "总量",  
            data: [nv],  
            itemStyle: { normal: { color: "#f4516c" } }  
          }  
        ]  
      };  
    },  
    onInit(e) {  
      let { width, height } = e;  
      let canvas = this.$refs.chart1.canvas;  
      echarts.setCanvasCreator(() => canvas);  
      chart1 = echarts.init(canvas, null, {  
        width: width,  
        height: height  
      });  
      canvas.setChart(chart1);  
      chart1.setOption(this.getOptions(50, 10));  
      this.$refs.chart1.setChart(chart1);  
    }  
    }  
    };  
    </script>  
    <style>  
    .echarts-wrap {  
    width: 100%;  
    height: 300px;  
    }  
    </style>
收起阅读 »

在 uni-app 内解析 xml

xml

使用npm安装xmldom

初始化npm工程(如果已经初始化,请跳过此步骤)

npm init

安装依赖

npm i xmldom

解析xml

var DOMParser = require('xmldom').DOMParser;  
var doc = new DOMParser().parseFromString(  
    '<xml xmlns="a" xmlns:c="./lite">\n'+  
        '\t<child>test</child>\n'+  
        '\t<child></child>\n'+  
        '\t<child/>\n'+  
    '</xml>'  
    ,'text/xml');  
doc.documentElement.setAttribute('x','y');  
doc.documentElement.setAttributeNS('./lite','c:x','y2');  
var nsAttr = doc.documentElement.getAttributeNS('./lite','x')  
console.info(nsAttr)  
console.info(doc)

详细文档:xmldom
示例工程:解析xml天气信息

继续阅读 »

使用npm安装xmldom

初始化npm工程(如果已经初始化,请跳过此步骤)

npm init

安装依赖

npm i xmldom

解析xml

var DOMParser = require('xmldom').DOMParser;  
var doc = new DOMParser().parseFromString(  
    '<xml xmlns="a" xmlns:c="./lite">\n'+  
        '\t<child>test</child>\n'+  
        '\t<child></child>\n'+  
        '\t<child/>\n'+  
    '</xml>'  
    ,'text/xml');  
doc.documentElement.setAttribute('x','y');  
doc.documentElement.setAttributeNS('./lite','c:x','y2');  
var nsAttr = doc.documentElement.getAttributeNS('./lite','x')  
console.info(nsAttr)  
console.info(doc)

详细文档:xmldom
示例工程:解析xml天气信息

收起阅读 »

当 uni-app 遇见 vscode

vscode

uni-app 是一个用 vue 语法来开发小程序、App、H5 的框架,官方推荐的开发工具为 HBuilderX,使用起来有很好的开发体验。

不过,由于 HBuilderX 没有 Linux 版以及很多前端之前已经习惯了 vscode,不想更换编辑器。直接使用 vscode 开发 uni-app,其体验并不是很好。

其实 uni-app 和 vscode 也可以很搭,接下来为大伙带来 vscode 中 uni-app 的正确打开姿势。

CLI 工程

全局安装 vue-cli 3.x(如已安装请跳过此步骤)

npm install -g @vue/cli

通过 CLI 创建 uni-app 项目

vue create -p dcloudio/uni-preset-vue my-project

此时,会提示选择项目模板,初次体验建议选择 hello uni-app 项目模板,如下所示:

在vscode中打开项目

安装vue语法提示插件vetur

CLI 工程默认带了uni-app语法提示和5+App语法提示

安装组件语法提示

组件语法提示是uni-app的亮点,其他框架很少能提供。

npm i @dcloudio/uni-helper-json

导入 HBuilderX 自带的代码块

从 github 下载 uni-app 代码块,放到项目目录下的 .vscode 目录即可拥有和 HBuilderX 一样的代码块。

运行项目

npm run dev:%PLATFORM%

发布项目

npm run build:%PLATFORM%

%PLATFORM% 可取值如下:

平台
h5 H5
mp-alipay 支付宝小程序
mp-baidu 百度小程序
mp-weixin 微信小程序
mp-toutiao 头条小程序
mp-qq qq 小程序

CLI 方式参考文档

HBuilderX 工程

HBuilderX 创建的工程默认不带 types 语法提示,在 vscode 中编辑的时候,可以自行安装

初始化npm(如已初始化跳过此步骤)

npm init -y

安装 uni-app 语法提示

npm i @types/uni-app @types/html5plus -D

另外,uni-app 项目下的 manifest.json、pages.json 等文件可以包含注释。vscode 里需要改用 jsonc 编辑器打开。

关于uni-app插件市场的插件,vscode一样可以使用。

  • 如果这些插件有npm使用方式(如uni-ui),可以用npm
  • 如果作者没提供npm方式,那么下载zip包解压也是可以用的
继续阅读 »

uni-app 是一个用 vue 语法来开发小程序、App、H5 的框架,官方推荐的开发工具为 HBuilderX,使用起来有很好的开发体验。

不过,由于 HBuilderX 没有 Linux 版以及很多前端之前已经习惯了 vscode,不想更换编辑器。直接使用 vscode 开发 uni-app,其体验并不是很好。

其实 uni-app 和 vscode 也可以很搭,接下来为大伙带来 vscode 中 uni-app 的正确打开姿势。

CLI 工程

全局安装 vue-cli 3.x(如已安装请跳过此步骤)

npm install -g @vue/cli

通过 CLI 创建 uni-app 项目

vue create -p dcloudio/uni-preset-vue my-project

此时,会提示选择项目模板,初次体验建议选择 hello uni-app 项目模板,如下所示:

在vscode中打开项目

安装vue语法提示插件vetur

CLI 工程默认带了uni-app语法提示和5+App语法提示

安装组件语法提示

组件语法提示是uni-app的亮点,其他框架很少能提供。

npm i @dcloudio/uni-helper-json

导入 HBuilderX 自带的代码块

从 github 下载 uni-app 代码块,放到项目目录下的 .vscode 目录即可拥有和 HBuilderX 一样的代码块。

运行项目

npm run dev:%PLATFORM%

发布项目

npm run build:%PLATFORM%

%PLATFORM% 可取值如下:

平台
h5 H5
mp-alipay 支付宝小程序
mp-baidu 百度小程序
mp-weixin 微信小程序
mp-toutiao 头条小程序
mp-qq qq 小程序

CLI 方式参考文档

HBuilderX 工程

HBuilderX 创建的工程默认不带 types 语法提示,在 vscode 中编辑的时候,可以自行安装

初始化npm(如已初始化跳过此步骤)

npm init -y

安装 uni-app 语法提示

npm i @types/uni-app @types/html5plus -D

另外,uni-app 项目下的 manifest.json、pages.json 等文件可以包含注释。vscode 里需要改用 jsonc 编辑器打开。

关于uni-app插件市场的插件,vscode一样可以使用。

  • 如果这些插件有npm使用方式(如uni-ui),可以用npm
  • 如果作者没提供npm方式,那么下载zip包解压也是可以用的
收起阅读 »

iOS证书类型及功能介绍

iOS打包

很多刚开始接触iOS证书的开发者可能不是很了解iOS证书的类型功能和概念。

下面对iOS证书的几个方面进行介绍。

iOS证书的类型和作用

1、iOS开发证书

iOS开发证书是用于测试APP,在开发过程中安装到苹果手机真机测试APP的运行情况。

2、iOS发布证书

当APP开发测试好后上线就需要用到iOS发布证书,用iOS发布证书打包的ipa才能上传到App Store审核。

3、iOS推送证书

iOS推送证书是用于推送通知的,平时我们在手机的系统栏下拉看到的那些消息就是推送通知,如果要做这个功能就需要配置推送证书。

4、iOS企业证书

iOS企业证书需要企业开发者账号才能申请,用于无法上架App Store的苹果APP打包签名使用。

常用的就是以上这4种iOS证书,当你需要什么功能的时候就知道用哪个类型的iOS证书。

iOS证书的构成和有效性

iOS证书由两个文件构成。p12文件和.mobileprovision文件

p12文件相当于公钥,.mobileprovision文件相当于私钥。

开发证书p12文件苹果规定只能申请2个,发布证书p12文件只能申请3个!iOS证书配置.mobileprovision文件是没有任何数量限制的!

p12可以共用,一个p12可以对应无数个.mobileprovision文件!所以就算p12申请一个也够用了,可以对应创建无数套iOS证书!

所以对于证书数量的担忧是没有意义的!不会限制你上架多少个APP!

ios证书的有效期是一年,在我们软件的和开发者后台都能看到到期时间。

iOS证书可以删除吗,到期怎么更新

iOS证书是可以随意删除的(不管有没有到期),不会影响已经上架的APP。

如果你还在测试APP。删除了测试用的开发证书,APP将打不开,当然这个也没什么关系,测试APP是要不停打包的,重新申请证书打包重新安装就可以了。

iOS证书到期了需不需要重新申请呢,具体看需要,如果你要更新已经上架的APP,更新版本,删除到期的证书重新申请打包上传更新。

如果不更新APP,到期了不管他也没什么关系,不会影响上架了的APP。

iOS证书的相关申请请看详细的测试与上架教程!

ios app真机测试到上架App Store详细教程

继续阅读 »

很多刚开始接触iOS证书的开发者可能不是很了解iOS证书的类型功能和概念。

下面对iOS证书的几个方面进行介绍。

iOS证书的类型和作用

1、iOS开发证书

iOS开发证书是用于测试APP,在开发过程中安装到苹果手机真机测试APP的运行情况。

2、iOS发布证书

当APP开发测试好后上线就需要用到iOS发布证书,用iOS发布证书打包的ipa才能上传到App Store审核。

3、iOS推送证书

iOS推送证书是用于推送通知的,平时我们在手机的系统栏下拉看到的那些消息就是推送通知,如果要做这个功能就需要配置推送证书。

4、iOS企业证书

iOS企业证书需要企业开发者账号才能申请,用于无法上架App Store的苹果APP打包签名使用。

常用的就是以上这4种iOS证书,当你需要什么功能的时候就知道用哪个类型的iOS证书。

iOS证书的构成和有效性

iOS证书由两个文件构成。p12文件和.mobileprovision文件

p12文件相当于公钥,.mobileprovision文件相当于私钥。

开发证书p12文件苹果规定只能申请2个,发布证书p12文件只能申请3个!iOS证书配置.mobileprovision文件是没有任何数量限制的!

p12可以共用,一个p12可以对应无数个.mobileprovision文件!所以就算p12申请一个也够用了,可以对应创建无数套iOS证书!

所以对于证书数量的担忧是没有意义的!不会限制你上架多少个APP!

ios证书的有效期是一年,在我们软件的和开发者后台都能看到到期时间。

iOS证书可以删除吗,到期怎么更新

iOS证书是可以随意删除的(不管有没有到期),不会影响已经上架的APP。

如果你还在测试APP。删除了测试用的开发证书,APP将打不开,当然这个也没什么关系,测试APP是要不停打包的,重新申请证书打包重新安装就可以了。

iOS证书到期了需不需要重新申请呢,具体看需要,如果你要更新已经上架的APP,更新版本,删除到期的证书重新申请打包上传更新。

如果不更新APP,到期了不管他也没什么关系,不会影响上架了的APP。

iOS证书的相关申请请看详细的测试与上架教程!

ios app真机测试到上架App Store详细教程

收起阅读 »

UNI-APP 开发微信公众号(H5)JSSDK 分享到微信中详解

微信JSSDK

首先声明本人纯小白,各demo基本网站上找来测试了两三天拼凑出来的,做不了技术解答哈望见谅,分享出来只是希望能够帮到像我一样的小白
1、安装js-sdk
可参考官方提供的 https://ask.dcloud.net.cn/article/35380
有两种方法:
①NPM安装

npm install jweixin-module --save

②直接下载引用(下载链接:https://unpkg.com/jweixin-module@1.4.1/out/index.js)
两种方式的差别,我感觉主要是npm安装的方式引用就是直接引用包名,下载引用需要引用详细地址,也不知道这种理解正确不。

var jweixin = require('jweixin-module')
var jweixin = require('jweixin-module/index.js')

2、在需要转发的页面onshow()里添加分享代码

// #ifdef H5  
            var jweixin = require('jweixin-module') //npm安装的引用  
            var surl = encodeURIComponent(window.location.href.split('#')[0]); //据说可以解决URL中带参数的问题,前台用的js编码,后台php解码  
            uni.request({  
                url: '/jssdk/gettokens.php',  
                method: 'POST',  
                header: {  
                    'content-type': 'application/x-www-form-urlencoded'  //post一定要带这个header,被这里坑了半天  
                },  
                data: {  
                    url: surl  
                },  
                success: res => {  
                    jweixin.config({  
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。  
                        appId: res.data.appId, // 必填,公众号的唯一标识  
                        timestamp: res.data.timestamp, // 必填,生成签名的时间戳  
                        nonceStr: res.data.nonceStr, // 必填,生成签名的随机串  
                        signature: res.data.signature, // 必填,签名,见附录1  
                        surl: res.data.surl, //自己添加的,debug为true的时候可以网页打印出对应的URL是否正确  
                        jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"]  
                    });  

                    jweixin.ready(function() {  
                        //自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0)  
                        jweixin.updateAppMessageShareData({  
                            title: '标题', // 分享标题  
                            desc: "描述内容", // 分享描述  
                            link: "链接", // 分享链接  
                            imgUrl: '显示图片', // 分享图标                                
                            success: function() {  
                                // 用户确认分享后执行的回调函数  
                            },  
                            cancel: function() {  
                                // 用户取消分享后执行的回调函数  
                            }  
                        });  
                        //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0)  
                        jweixin.updateTimelineShareData({  
                            title: '标题', // 分享标题                                  
                            link: '链接', // 分享链接  
                            imgUrl: '显示图片', // 分享图标                                
                            success: function() {  
                                // 用户确认分享后执行的回调函数  
                            },  
                            cancel: function() {  
                                // 用户取消分享后执行的回调函数  
                            }  
                        });  

                    });  
                },  
                fail: () => {  
                    console.log('request fail', err);  
                },  
                complete: () => {}  
            });  

// #endif  

3、gettokens.php文件,PHP后台api接口,用于前台request请求,返回wx.config部分。在此文件中修改成自己的appid和appsecre。可以在PC端直接访问此接口,到下面的签名校验工具中先校验签名文件是否正常
4、access_token.php 缓存token
5、jsapi_ticket.php 缓存ticket,可以从此文件中获取jsapi_ticket到微信 JS 接口签名校验工具中校验签名是否正确(https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign)
6、jssdk_wx.php 后台签名验证文件,此4个文件可从下面附件下载

继续阅读 »

首先声明本人纯小白,各demo基本网站上找来测试了两三天拼凑出来的,做不了技术解答哈望见谅,分享出来只是希望能够帮到像我一样的小白
1、安装js-sdk
可参考官方提供的 https://ask.dcloud.net.cn/article/35380
有两种方法:
①NPM安装

npm install jweixin-module --save

②直接下载引用(下载链接:https://unpkg.com/jweixin-module@1.4.1/out/index.js)
两种方式的差别,我感觉主要是npm安装的方式引用就是直接引用包名,下载引用需要引用详细地址,也不知道这种理解正确不。

var jweixin = require('jweixin-module')
var jweixin = require('jweixin-module/index.js')

2、在需要转发的页面onshow()里添加分享代码

// #ifdef H5  
            var jweixin = require('jweixin-module') //npm安装的引用  
            var surl = encodeURIComponent(window.location.href.split('#')[0]); //据说可以解决URL中带参数的问题,前台用的js编码,后台php解码  
            uni.request({  
                url: '/jssdk/gettokens.php',  
                method: 'POST',  
                header: {  
                    'content-type': 'application/x-www-form-urlencoded'  //post一定要带这个header,被这里坑了半天  
                },  
                data: {  
                    url: surl  
                },  
                success: res => {  
                    jweixin.config({  
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。  
                        appId: res.data.appId, // 必填,公众号的唯一标识  
                        timestamp: res.data.timestamp, // 必填,生成签名的时间戳  
                        nonceStr: res.data.nonceStr, // 必填,生成签名的随机串  
                        signature: res.data.signature, // 必填,签名,见附录1  
                        surl: res.data.surl, //自己添加的,debug为true的时候可以网页打印出对应的URL是否正确  
                        jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"]  
                    });  

                    jweixin.ready(function() {  
                        //自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0)  
                        jweixin.updateAppMessageShareData({  
                            title: '标题', // 分享标题  
                            desc: "描述内容", // 分享描述  
                            link: "链接", // 分享链接  
                            imgUrl: '显示图片', // 分享图标                                
                            success: function() {  
                                // 用户确认分享后执行的回调函数  
                            },  
                            cancel: function() {  
                                // 用户取消分享后执行的回调函数  
                            }  
                        });  
                        //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0)  
                        jweixin.updateTimelineShareData({  
                            title: '标题', // 分享标题                                  
                            link: '链接', // 分享链接  
                            imgUrl: '显示图片', // 分享图标                                
                            success: function() {  
                                // 用户确认分享后执行的回调函数  
                            },  
                            cancel: function() {  
                                // 用户取消分享后执行的回调函数  
                            }  
                        });  

                    });  
                },  
                fail: () => {  
                    console.log('request fail', err);  
                },  
                complete: () => {}  
            });  

// #endif  

3、gettokens.php文件,PHP后台api接口,用于前台request请求,返回wx.config部分。在此文件中修改成自己的appid和appsecre。可以在PC端直接访问此接口,到下面的签名校验工具中先校验签名文件是否正常
4、access_token.php 缓存token
5、jsapi_ticket.php 缓存ticket,可以从此文件中获取jsapi_ticket到微信 JS 接口签名校验工具中校验签名是否正确(https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign)
6、jssdk_wx.php 后台签名验证文件,此4个文件可从下面附件下载

收起阅读 »

创建新的Webview之后无法直接使用close关闭窗口的问题

为了理解方便我写了个例子,就是在初始页面打开新的页面然后再将新的页面关闭:

index.html  

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <script src="js/mui.min.js"></script>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
    <script type="text/javascript" charset="utf-8">  
        mui.init();  
    </script>  
</head>  
<body>  
    测试一  
    <script src="html5plus://ready"></script>  
    <!-- 要使用窗口执行,需要加载plus文件 -->  
    <script type="text/javascript">  
        mui.openWindow({  
            url: "test.html",  
            id: "test.html",  
            show:{  
                autoShow: true,  
                aniShow: "none",  
                duration: 0  
            }  
        });  
    </script>  
</body>  
</html>
<!doctype html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link href="css/mui.css" rel="stylesheet" />  
    </head>  

    <body>  
        测试二  
        <script src="js/mui.js"></script>  
        <script type="text/javascript">  
            mui.init()  
        </script>  
        <script src="html5plus://ready"></script>  
        <script type="text/javascript">  
            var currentWebview = plus.webview.currentWebview();  
            currentWebview.close();   //问题出现  
        </script>  
    </body>  

</html>

真机测试:安卓6.0, 索尼SOV32
如果直接用close关闭,页面虽然关闭了,但是程序就一直处于忙碌状态(屏幕中间有图标一直在转圈圈)。
后来问题的解决是用window的延迟方法把关闭延迟了几秒,就正常的close了,没有圈圈在屏幕上打转。

疑问:为什么要延迟才会解决这个问题?

继续阅读 »

为了理解方便我写了个例子,就是在初始页面打开新的页面然后再将新的页面关闭:

index.html  

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <script src="js/mui.min.js"></script>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
    <script type="text/javascript" charset="utf-8">  
        mui.init();  
    </script>  
</head>  
<body>  
    测试一  
    <script src="html5plus://ready"></script>  
    <!-- 要使用窗口执行,需要加载plus文件 -->  
    <script type="text/javascript">  
        mui.openWindow({  
            url: "test.html",  
            id: "test.html",  
            show:{  
                autoShow: true,  
                aniShow: "none",  
                duration: 0  
            }  
        });  
    </script>  
</body>  
</html>
<!doctype html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link href="css/mui.css" rel="stylesheet" />  
    </head>  

    <body>  
        测试二  
        <script src="js/mui.js"></script>  
        <script type="text/javascript">  
            mui.init()  
        </script>  
        <script src="html5plus://ready"></script>  
        <script type="text/javascript">  
            var currentWebview = plus.webview.currentWebview();  
            currentWebview.close();   //问题出现  
        </script>  
    </body>  

</html>

真机测试:安卓6.0, 索尼SOV32
如果直接用close关闭,页面虽然关闭了,但是程序就一直处于忙碌状态(屏幕中间有图标一直在转圈圈)。
后来问题的解决是用window的延迟方法把关闭延迟了几秒,就正常的close了,没有圈圈在屏幕上打转。

疑问:为什么要延迟才会解决这个问题?

收起阅读 »