请检查你的nginx缓存设置

请求缓存问题

请求缓存问题

请求缓存问题

重要的事说三次

我被这个小问题整整坑了一天！！！

小程序技术领域，有几个谜一样的存在：微信的WXS、支付宝的SJS、百度的Filter。

很多开发者都不明白为什么要造这种语言脚本的轮子出来，甚至很多开发者根本不知道它们的存在。

其实几大小程序平台创造它们，都是为了解决性能问题，但不得不吐槽下，设计的实在是很难用，文档也语焉不详。

uni-app支持将WXS、SJS、Filter编译到这3家小程序平台，同时还在App和H5实现了WXS的解析。为什么做这些事？也是为了性能。

比如uni-ui组件库中的swiperaction组件，就是列表项向左滑动时拉出几个挤压式联动的菜单按钮，这种流畅的跟手动画，正是借助于WXS机制实现的。

微信为何要创造WXS

WXS（WeiXin Script）是微信创造的一套脚本语言，它的官方说法是：“WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致”。

那微信为何要脱离 JavaScript ，单独创造一套语言呢？这要从微信小程序的底层逻辑（运行环境）讲起。

小程序的运行环境分为逻辑层和视图层，分别由2个线程管理，其中：

• WXML 模板和 WXSS 样式工作在视图层，界面使用 WebView 进行渲染
• JavaScript代码工作在逻辑层，运行在JsCore或v8里

小程序在视图层与逻辑层两个线程间提供了数据传输和事件系统。这样的分离设计，带来了显而易见的好处：

• 逻辑和视图分离，即使业务逻辑计算非常繁忙，也不会阻塞渲染和用户在视图层上的交互

但同时也带来了明显的坏处：

• 视图层（webview）中不能运行JS，而逻辑层JS又无法直接修改页面DOM，数据更新及事件系统只能靠线程间通讯，但跨线程通信的成本极高，特别是需要频繁通信的场景

什么是需要频繁通讯的场景？最典型的例子就是用户持续交互的情况，比如触摸、滚动等。我们以侧滑菜单为例，假设在页面上滑动A元素，要求B元素跟随移动，一次滑动操作（touchmove）的响应过程如下：

1. touchmove 事件从视图层（Webview）传递到逻辑层，中间会由微信客户端（Native）做中转
   
2. 逻辑层处理 touchmove 事件，计算需移动的位置，然后再通过 setData 传递到视图层，中间同样会由微信客户端（Native）做中转
   

一次 touchmove 的响应需要经过 视图层、Native、逻辑层三者之间2个完整来回的通信，通信的耗时开销较大，用户的交互就会出现延时卡顿的情况。

除了滚动、拖动交互外，在for循环里对数据做格式修改，也会造成逻辑层和视图层频繁通讯。

其实这类通信损耗问题，在业内由来已久，react native和weex都有类似问题，weex提供了bindingx来解决。

但对于小程序来讲，这类问题解决起来更容易。因为其实视图层的webview，是有js环境的，只不过过去不给开发者开放。

如果在视图层的js直接处理滚动或拖动交互、直接处理数据格式，就能避免大量通信损耗。

但对于小程序平台而言，大量开放webview里的js编写，违反了它的初衷，比如开发者会直接操作dom，影响性能体验。所以小程序平台提出一种新规范，限制webview里可运行的js的能力。这就是wxs、sjs、filter的由来。

从本质来讲，wxs、sjs、filter是一种被限制过的、运行在视图层webview里的js。它并不是真的发明了一种新语言。

WXS特征及适用场景

WXS具备如下特征：

• WXS是可以在视图层（webview）中运行的JS
• WXS无法直接修改业务数据，仅能设置当前组件的class和style，或者对数据进行格式化。要修改逻辑层的数据，需要通过 callMethod，传递参数给逻辑层
• WXS是被限制过的JavaScript，可以进行一些简单的逻辑运算
• WXS可以监听touch事件，处理滚动、拖动交互

故可以得出WXS的适用场景，主要包括：

• 用户交互频繁、仅需改动组件样式（比如布局位置），无需改动数据内容的场景，比如侧滑菜单、索引列表、滚动渐变等
• 数据格式处理，比如文本、日期格式化，或者国际化。通过WXS可以模拟实现Vue框架的过滤器,如下是一个通过wxs实现首字母大写的示例：

<wxs module="m1">  
  //首字母大写  
  var capitalize = function(value) {  
    if (!value) return ''  
    value = value.toString()  
    return value.charAt(0).toUpperCase() + value.slice(1)  
  }  
  module.exports = {  
    capitalize: capitalize  
  }  
</wxs>  
<view class="content">  
  <view class="text-area">  
    <!-- title 为当前页面 data 中定义的初始数据 -->  
    <text class="title">{{m1.capitalize(title)}}</text>  
  </view>  
</view>

uni-app如何支持WXS

uni-app遵循Vue单文件组件（SFC）规范，组件/样式/脚本是写在一个.vue文件中的，但微信小程序是多文件分离（wxml/wxss/js/json）的，所以在微信端的主要工作是扩展vue-template-compiler，解析template/style/script节点，并正确生成到对应的wxml/wxss/js文件中，具体编译工作如下图：

Tips-1：关于<wxs>标签重构为<script lang="wxs">的说明：

因.vue文件中的<wxs>标签及内嵌WXS代码，在主流前端开发工具（vscode/HBuilderX等）中，均无法实现语法提示、代码高亮及格式化，故uni-app将<wxs module="m1">重构为<script module="m1" lang="wxs">，便捷实现了语法提示、代码高亮等，如下为vscode/HBuilderX中对于<wxs>标签重构前后的代码高亮对比，明显重构为<script lang="wxs">后，开发体验更佳：

Tips-2：鉴于Vue的自定义标签规范，我们建议将<wxs>（<script lang="wxs">）和template平级编写

编译器的具体解析扩展工作，这里不详述，仅给出wxs生成的示例代码，让大家有个直观理解：

createFilterTag (filterTag, {  
    content,  
    attrs  
  }) {  
    content = content.trim()  
    if (content) { //<wxs>标签内直接编写 wxs 代码  
      return `<${filterTag} module="${attrs.module}">  
        ${content}  
        </${filterTag}>`  
    } else if (attrs.src) { //外联 .wxs 文件  
      return `<${filterTag} src="${attrs.src}" module="${attrs.module}"></${filterTag}>`  
    }  
  }

在保证编译正确的情况下，微信小程序运行时会正确解析并执行WXS脚本，框架runtime无需干预。

基于 WXS 提升性能体验的实现示例

下面的gif显示的内容，是借助 WXS 实现的一个swipeaction组件示例，列表项向左滑动时拉出几个挤压式联动的菜单按钮，跟手动画、回弹动画都很自然流畅。

这里简单给出主要实现思路：

1. 在 vue 中引用 wxs 文件，并绑定 touch 事件

   <template>  
   <view class="uni-swipe_content">  
     <!-- 可滑动的菜单项容器，绑定touch事件 -->  
   <view :data-position="pos" class="move-hock"  
     @touchstart="swipe.touchstart" @touchmove="swipe.touchmove" @touchend="swipe.touchend" @change="change">  
     <view class="uni-swipe_box">  
       <slot />  
     </view>  
     <view class="uni-swipe_button-group move-hock">  
         <!-- 滑动后，右侧挤压式的联动菜单按钮-->  
       <view v-for="(item,index) in options" :data-button="btn" :key="index"  class="button-hock">  
       {{ item.text }}  
       </view>  
     </view>  
   </view>  
   </view>  
   </template>  
   <script module="swipe" lang="wxs" src="./index.wxs"></script>

2. 在 wxs 文件中，处理 touch 事件逻辑，通过 translateX 移动元素位置

function touchstart(e, ins) {  
    //记录开始位置及动画状态  
  var pageX = e.touches[0].pageX;  
  ....  
}  

function touchmove(e, ownerInstance) {  
  var instance = e.instance;  
  var pageX = e.touches[0].pageX;//获取当前移动位置  
  //计算偏移位置  
  var x = Math.max(-instance.getState().position[1].width, Math.min((value), 0));  
  //设置左侧元素移动位置  
  instance.setStyle({transform: 'translateX(' + x + 'px)'})   

  //循环右侧挤压式联动菜单  
  var btnIns = ownerInstance.selectAllComponents('.button-hock');  
  for (var i = 0; i < btnIns.length; i++) {  
    ...  
    //设置每个联动菜单的移动位置  
    btnIns[i].setStyle({transform: 'translateX(' + (arr[i - 1] + value * (arr[i - 1] / position[1].width)) + 'px)'})  
    ...  
  }  
}  

function touchend(e, ownerInstance) {  
  var instance = e.instance;  
  var state = instance.getState()  
  //根据当前移动位置，实现菜单项的自动展开或回弹  
  move(state.left, -40, instance, ownerInstance)  
}

该示例的完整源码参考github

在这段代码中，响应手势并移动菜单，是在视图层直接完成的。而不用wxs的传统写法，实现这个功能就会很卡。首先是视图层接收到touch事件，然后传递给逻辑层，逻辑层的js响应touch事件，判断移动距离，再通知视图层更新界面元素的位置。在持续的拖动过程中，视图层和逻辑层不停交互通信，无法做到跟手的顺滑。

虽然我们了解了wxs的原理，但老实讲，wxs挺难用的，直到现在，大多数开发者仍然不会用它。比较合适的做法，还是一些框架的作者对它进行封装。uni-app提供的uni-ui组件库，就是这样做的，开发者只需要按标准vue组件的方式去引用uni ui的swiperaction组件，就能得到流畅的滑动跟手菜单。

更多平台的兼容性

uni-app的App端也是一个小程序引擎，为了在App端实现流畅的跟手拖动，也实现和兼容了wxs。

其实H5平台倒不存在逻辑层和视图层通讯折损的问题，但为了平台兼容性拉齐，uni-app在H5端也实现了wxs机制。

这样编写wxs代码，在uni-app中可同时运行在App端、H5端、微信小程序端。

百度小程序的Filter过滤器和支付宝小程序的SJS，成熟度还比较低，目前只能处理基本的数据格式过滤，还不能响应touch等交互事件。

至于头条和QQ小程序，还不支持类WXS机制。

期待其他小程序平台尽快补齐这个重要功能，实现体验的提升。

uni-app目前也支持单独编写百度小程序的Filter过滤器和支付宝小程序的SJS，这两种脚本无法跨多端，仅支持自有平台。开发者若需使用，可分别编写wxs/filter/sjs脚本，然后依次通过script引用，uni-app编译器会根据目标平台，分别编译发行，如下为示例代码：
示例代码要有条件编译

<!-- App/H5/微信小程序平台调用wxs脚本 -->  
<script module="utils" lang="wxs" src="./utils.wxs"></script>  
<!-- 百度小程序平台调用filter.js脚本 -->  
<script module="utils" lang="filter" src="./utils.filter.js"></script>  
<!-- 支付宝小程序平台调用sjs脚本 -->  
<script module="utils" lang="sjs" src="./utils.sjs"></script>

后续

用运行在视图层的js解决通讯阻塞，可能很多人都没意识到。希望本文能给大家解惑，解开WXS之谜。

其实小程序的性能体验优化，仍然有大量空间。DCloud团队在这个领域研究了6年，清楚小程序技术架构的优势，也清楚当前的问题。我们会继续分享这些问题及对应的解决方案，为小程序产业发展贡献力量。

本文涉及的uni-ui的swiperaction组件，代码开源在https://github.com/dcloudio/uni-ui，uni-app框架代码开源在 https://github.com/dcloudio/uni-app，欢迎大家 star 或提交 pr。

公告：uni-app将于2019年11月1日起停止支持非自定义组件模式

非自定义组件作为一种被淘汰的技术，为了向下兼容，一直保留在uni-app的核心代码中。

目前uni-app的编译模式过多：有非自定义组件模式、自定义组件模式；有nvue、有vue；nvue有weex编译模式、有uni-app编译模式；还支持纯nvue编译模式。

太多历史兼容，导致编译器复杂度太高，代码冗余很多。

目前在App、微信小程序、百度小程序、支付宝小程序、头条小程序上，仍然有部分开发者一直未升级到自定义组件模式。请开发者快速升级。

uni-app将于2019年11月1日起停止支持非自定义组件模式，届时，新版HBuilderX真机运行和云打包，都不再支持非自定义组件模式。HBuilderX的云打包，只向下保留2个版本。再升级1个版本后，老版打包机也不再支持非自定义组件模式。

升级自定义组件模式，开发者将得到更好的应用性能、更便利的调试体验。

升级方式

在manifest.json可配置编译模式。

• 方式1. 可视化界面
  在App、微信、百度、支付宝、头条小程序配置界面，勾上自定义组件编译模式

• 方式2. 源码视图
  如下：

  {  
  "name" : "",  
  "appid" : "",  
  "app-plus" : {  
      "usingComponents" : true  
  },  
  "mp-weixin" : {  
      "appid" : "",  
      "usingComponents" : true  
  },  
  "mp-alipay" : {  
      "usingComponents" : true  
  },  
  "mp-baidu" : {  
      "usingComponents" : true  
  },  
  "mp-toutiao" : {  
      "usingComponents" : true  
  }  
  }

升级后，如代码运行异常，参考下文调整

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

如果你不知道自己是什么编译模式，通过以下方式查看：
打开manifest源码视图里，看每个平台下是否有 "usingComponents" : true。
如果值为true就是自定义组件模式。
如果值为false或没有该键名则为非自定义组件模式。

在HBuilderX 1.9.0.20190412以后新建的项目，默认都会添加自定义组件模式标记，之前的版本新建的项目，默认都是非自定义组件的。

如果用h5+获取微信金额
有偿 100 给demo 感谢

如题

除了在小程序开发工具中“安全”中开启服务端口外，还需要先打开小程序开发工具，然后在HBuilderX中启动uniapp项目，启动uniapp期间确保小程序开发工具始终在最前端显示...

        ```javascript  

uni.request({
url: aaa,
method: 'GET',
dataType: 'base64',
success: function(res) {
var base64 = res.data.slice(23);

                                                    // that.dataList.picList.push(base64);  
                                                    console.log(base64);  
                                                that.getTextFromImage(base64);  

                                                }  

                });

在支付宝编辑器中模拟器可以正常转换   base64但是真机就会没有反应

使用“v-model”双向绑定数据来实现功能需求，比"@input"更实用，验证表单的代码也更简洁。
废话不多说了，呵呵，直接上代码：

<template>  
    <view>  
        <input v-model="searchKey" placeholder="请输入订单号" />  
        <button @click="emptyInput()">清空</button>  
    </view>  
</template>  

<script>  
    data() {  
        return {  
        searchKey: 'input的值'  
        }  
    }，  
    methods: {  
         emptyInput(){  
            this.searchKey='';  
        }  
    }  
</script>

菜鸟级编程爱好者

以前 Vue 的编辑器一直用的是 Webstorm 和 VS code。不久前从网上得知 HbuilderX 把 Vue 编辑器和 IDE 的功能合二为一，就尝试着用用。几天用下来，总的感觉：HbuilderX 很有特点，相当不错。
一、非常受用的功能和特性

1. 非常及时、有用的代码提示和补全功能，特别是提示中提供的选项给使用者提供了很好的便利。
2. 预览功能：非常好用，特别是在调试代码，需要多个浏览器同时运行时。记得好像 Adobe Dreamweaver CS 提供了预览，但其和代码的结合没有 HbuilderX 自然。
3. 绿色软件，这么复杂的软件不用安装，怎么做到的？
4. 启动软件非常快，比 VS code 快多了。
5. 热加载功能非常体贴我等马大哈 —— 不用担心丢失代码了。

二、遇到的问题

1. 用 HbuilderX 内置功能新建 Vue 项目：以前都是用 Vue 的脚手架来新建项目，然后用编辑器编辑，这次不用脚手架，用 HbuilderX 新建项目后发现不能运行，用下列方法解决了问题：npm install --》安装依赖；npm init--》初始化。不知是否有更省事的方法？
2. HbuilderX 发行版 2.2.2 内置的开发者工具里控制台不能输出信息，除非 Vue 代码里有 a 标签，并链接了一次互联网。无奈之下，下载了 alpha 2.2.5 版一试，居然无条件打开控制台并输出信息。现在我干脆用 alpha 版。
3. 安装 Element-ui 包后，运行报错，无法使用。解决的办法：使用项目的功能 —— 重新识别项目类型，重新构建项目索引。然后。。。可以用 Element-ui 了。
4. Tab、退格键还不够智能化。比如我希望子代码缩进 4 个空格，当前部分子代码只缩进空格数未达到要求，当用 Tab 键调整缩进的时候应能根据缩进设定智能调整一次增加1 - 4 个空格。Tab 目前不能达到要求，退格键同理。

三、建议
希望软件能在三个方面更加完善：

1. 更加傻瓜式
2. 更加智能化
3. 更加健壮
4. 更加人性化

感谢 DCloud 为用户提供了这么优秀的软件，就像 LiteIDE 那样优秀。我就赖上你了，加油！

本人第一次用hbuilderx 开发手机app 因需求,,需要读写IC卡及获取IC卡的唯一ID
在论坛转了转,参照相关的帖子,如下: 原文地址1 原文地址2以及查看了android.nfc的相关api说明.经验分享出来.

var NfcAdapter;  
var NdefRecord;  
var NdefMessage;  
var nfcAdapter;  

function listenNFCStatus() {  
    try {  
        var main = plus.android.runtimeMainActivity();  
        var Intent = plus.android.importClass('android.content.Intent');  
        var Activity = plus.android.importClass('android.app.Activity');  
        var PendingIntent = plus.android.importClass('android.app.PendingIntent');  
        var IntentFilter = plus.android.importClass('android.content.IntentFilter');  
        NfcAdapter = plus.android.importClass('android.nfc.NfcAdapter');  
        nfcAdapter = NfcAdapter.getDefaultAdapter(main);  
        var intent = new Intent(main, main.getClass());  
        intent.addFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP);  
        var pendingIntent = PendingIntent.getActivity(main, 0, intent, 0);  
        var ndef = new IntentFilter("android.nfc.action.TECH_DISCOVERED");  
        ndef.addDataType("*/*");  
        var intentFiltersArray = [ndef];  
        var techListsArray = [  
            ["android.nfc.tech.IsoDep"],  
            ["android.nfc.tech.NfcA"],  
            ["android.nfc.tech.NfcB"],  
            ["android.nfc.tech.NfcF"],  
            ["android.nfc.tech.Nfcf"],  
            ["android.nfc.tech.NfcV"],  
            ["android.nfc.tech.NdefFormatable"],  
            ["android.nfc.tech.MifareClassi"],  
            ["android.nfc.tech.MifareUltralight"]  
        ];  
        document.addEventListener("newintent",  
            function() {  
                console.error('newintent');  
                setTimeout(handle_nfc_data1, 1000);  
            }, false);  
        document.addEventListener("pause", function(e) {  
            if (nfcAdapter) {  
                nfcAdapter.disableForegroundDispatch(main);  
                console.log('pause');  
            }  
        }, false);  
        document.addEventListener("resume", function(e) {  
            if (nfcAdapter) {  
                nfcAdapter.enableForegroundDispatch(main, pendingIntent, intentFiltersArray, techListsArray);  
            }  
        }, false);  

        nfcAdapter.enableForegroundDispatch(main, pendingIntent, intentFiltersArray, techListsArray);  

    } catch (e) {  
        console.error(e);  
    }  
}  

function handle_nfc_data1() {  
    NdefRecord = plus.android.importClass("android.nfc.NdefRecord");  
    NdefMessage = plus.android.importClass("android.nfc.NdefMessage");  
    var main = plus.android.runtimeMainActivity();  
    var intent = main.getIntent();  
    if ("android.nfc.action.TECH_DISCOVERED" == intent.getAction()) {  
        if (readyWriteData) {  
            __write(intent);  
            readyWriteData = false;  
        } else if (readyRead) {  
            __read(intent);  
            readyRead = false;  
        } else if (readyGetid) {  
            __getId(intent);  
            readyGetid = false;  
        }  
    }  
}  

function showToast(msg) {  
    plus.nativeUI.toast(msg);  
}  

function __write(intent) {  
    try {  
        waiting.setTitle('请勿移开标签\n正在写入...');  
        var textBytes = plus.android.invoke(writeInfo, "getBytes");  
        // image/jpeg text/plain    
        var textRecord = new NdefRecord(NdefRecord.TNF_MIME_MEDIA,  
            plus.android.invoke("text/plain", "getBytes"), plus.android.invoke("", "getBytes"), textBytes);  
        var message = new NdefMessage([textRecord]);  
        var Ndef = plus.android.importClass('android.nfc.tech.Ndef');  
        var NdefFormatable = plus.android.importClass('android.nfc.tech.NdefFormatable');  
        var tag = intent.getParcelableExtra(NfcAdapter.EXTRA_TAG);  
        var ndef = Ndef.get(tag);  
        console.log(JSON.stringify(ndef));  
        if (ndef != null) {  
            var size = message.toByteArray().length;  
            console.log("size=" + size);  
            ndef.connect();  
            if (!ndef.isWritable()) {  
                showToast("tag不允许写入");  
                waiting.close();  
                return;  
            }  
            if (ndef.getMaxSize() < size) {  
                showToast("文件大小超出容量");  
                waiting.close();  
                return;  
            }  

            ndef.writeNdefMessage(message);  
            waiting.close();  
            showToast("写入数据成功.");  
            return;  
        } else {  
            var format = NdefFormatable.get(tag);  
            if (format != null) {  
                try {  
                    format.connect();  
                    format.format(message);  
                    showToast("格式化tag并且写入message");  
                    waiting.close();  
                    return;  
                } catch (e) {  
                    showToast("格式化tag失败.");  
                    waiting.close();  
                    return;  
                }  
            } else {  
                showToast("Tag不支持NDEF");  
                waiting.close();  
                return;  
            }  
        }  
    } catch (e) {  
        console.log("error=" + e);  
        waiting.close();  
        alert('写入失败');  
    }  

}  

function __read(intent) {  
    try {  
        waiting.setTitle('请勿移开标签\n正在读取数据...');  
        var Parcelable = plus.android.importClass("android.os.Parcelable");  
        var rawmsgs = intent.getParcelableArrayExtra("android.nfc.extra.NDEF_MESSAGES");  
        var records = rawmsgs[0].getRecords();  
        var result = records[0].getPayload();  
        var s = plus.android.newObject("java.lang.String", result);  
        waiting.close();  
        if (s.length > 0) {  
            if (typeof readAction === 'function') {  
                readAction(s);  
            }  
        } else {  
            showToast("数据为空");  
        }  

    } catch (e) {  
        console.log("error=" + e);  
        waiting.close();  
        alert('读取失败');  
    }  

}  

function __getId(intent) {  
    try {  
        var tag = plus.android.importClass('android.nfc.Tag');  
        tag = intent.getParcelableExtra(NfcAdapter.EXTRA_TAG);  

        var result = tag.getId();  
        //var id = plus.android.newObject("java.lang.String", result);  
        waiting.close();  
        if (result.length > 0) {  
            if (typeof GetidAction === 'function') {  

                GetidAction(GetIdParam, result);  
            }  
        } else {  
            showToast("数据为空");  
        }  

    } catch (e) {  
        //TODO handle the exception  
        console.log("error=" + e);  
        waiting.close();  
        alert('读取失败');  
    }  
}  

document.addEventListener('plusready', listenNFCStatus, false);  

var waiting;  
var readyWriteData = false;  
var readyRead = false;  
var readyGetid = false;  

var readAction;  

var GetidAction;  
var GetIdParam;  

var writeAction;  
var writeInfo;  

function writeData(writeValue, writefunction, ) {  

    readyWriteData = true;  
    writeInfo = writeValue;  
    writeAction = writefunction;  
    waiting = plus.nativeUI.showWaiting("请将NFC标签靠近！");  
}  

function readData(readfunction) {  
    readyRead = true;  
    readAction = readfunction;  
    waiting = plus.nativeUI.showWaiting("请将NFC标签靠近！");  
}  

function getId(param, getidfunction) {  
    readyGetid = true;  
    GetIdParam = param;  
    GetidAction = getidfunction;  

    waiting = plus.nativeUI.showWaiting("请将NFC标签靠近！");  
}  

function convertCardID(cardIdResult) {  
    var tmp = '';  

    for (var i = 0; i < cardIdResult.length; i++) {  
        var valueStr = parseInt(cardIdResult[i]);  

        if (valueStr < 0) {  
            tmp = tmp + (255 + valueStr + 1).toString(16).toUpperCase() + ":";  
        } else if (valueStr >= 0 && valueStr < 16) {  
            tmp = tmp + '0' + valueStr.toString(16).toUpperCase() + ":";  
        } else {  
            tmp = tmp + valueStr.toString(16).toUpperCase() + ":";  
        }  
    }  
    return tmp.substr(0, tmp.length - 1);  
}  

以前没搞过.9.png，这个东东初学者真的很难理解，昨天仔细研究了一下，算是搞明白了，所以分享一下使用心得。

1、首先读一下这篇文章Android设计中的.9.png图片

2、上面说得很清楚这个.9.png能做到什么，但是怎么操作细节却没讲清楚，下面是重点
a、工具是指的draw9patch.bat工具，android SDK上自带的，只要安装过SDK，应该能搜索到
b、先勾上Show patches方便看结果，粉色为拉伸区域，表色是固定区域
c、工具左边是编辑区，右边是预览区（从上到下3个预览结果，1纵向拉伸效果，2横向拉伸效果，3放大拉伸效果）
d、画黑边，在图像区域外点击拖动鼠标，每条黑边都是一个矩形
e、擦除黑边，还是在图像区域外，拖动这个黑边对应矩形的边界，直到矩形的高或宽为0，就算擦除了
f、要按shift键，只能在边的一个像素上操作（先放大图像，不然点不到一个像素的），可以把一个矩形切成2个
g、Show content勾上后可以在预览区看到文字在显示的区域（淡紫色区域）

3、编辑.9.png如果没弄对，本地打包会失败，云打包会不会失败暂时不知道

uni-app的api和微信的api其实很相似,用法一样,在这里奉上我之前在项目中实现蓝牙开锁的代码,我会说明每一步的步骤,哪个步骤用哪个api,每个api的详细用法可以去uni-app官网参考文档

• 蓝牙整个步骤：1初始化蓝牙，2开始搜寻附近的蓝牙外围设备，3监听寻找到新设备的事件，4搜寻到需要的蓝牙，停止搜寻附近的蓝牙外围设备，5连接低功耗蓝牙设备，6获取蓝牙设备所有服务(service)，7获取蓝牙设备某个服务中所有特征值(characteristic)，8启用低功耗蓝牙设备特征值变化时的 notify 功能，订阅特征值。注意：必须设备的特征值支持 notify 或者 indicate 才可以成功调用，9向低功耗蓝牙设备特征值中写入二进制数据。

        uni.openBluetoothAdapter({//首先初始化蓝牙  
                  success(res) {  
                    console.log(JSON.stringify(res))  
                    uni.startBluetoothDevicesDiscovery({//这里是开启蓝牙搜寻  
                      success: (res) => {  
                        console.log('startBluetoothDevicesDiscovery success', res)  
                        uni.onBluetoothDeviceFound((res) => {//这一步是监听返回的蓝牙设备  
                                console.log(JSON.stringify(res))  
                          res.devices.forEach(device => {//这一步就是去筛选找到的蓝牙中,有没有你匹配的名称  
                            console.log(JSON.stringify(device))  
                            if (device.name == 'XiaoanTech') {  
                                      this.DeviceID = device.deviceId  
                                      let DeviceID = device.deviceId//这里是拿到的uuid  
                              uni.stopBluetoothDevicesDiscovery({//当找到匹配的蓝牙后就关掉蓝牙搜寻,因为蓝牙搜寻很耗性能  
                                success(res) {  
                                  console.log(JSON.stringify(res))  
                                }  
                              })  
                              console.log(DeviceID)  
                              uni.createBLEConnection({//连接低功耗蓝牙设备  
                                deviceId:DeviceID,//传入刚刚获取的uuid  
                                success(res) {  
                                  console.log(JSON.stringify(res))  
                                  //uni.getConnectedBluetoothDevices({  
                                  //success(res) {  
                                  //console.log(JSON.stringify(res))  
                                  //}  
                                  //})  
  
                                  setTimeout(function(){//这里为什么要用setTimeout呢,等等下面会解释  
                                          uni.getBLEDeviceServices({//获取蓝牙设备所有服务  
                                              deviceId:DeviceID,  
                                              success(res) {//为什么要用延时,因为不用延时就拿不到所有的服务,在上一步,连接低功耗蓝牙  
  //设备的时候,需要一个600-1000毫秒的时间后,再去获取设备所有服务,不给延时就会一直返回错误码10004                               
                                                  console.log(JSON.stringify(res))  
                                                  uni.getBLEDeviceCharacteristics({//获取蓝牙设备某个服务中所有特征值  
                                                      deviceId:DeviceID,  
                                                      serviceId:this.ServiceUUID,//这个serviceId可以在上一步获取中拿到,也可以在  
  //蓝牙文档中(硬件的蓝牙文档)拿到,我这里是通过文档直接赋值上去的,一般有两个,一个是收的uuid,一个是发的uuid,我们这边是发  
                                                      success(res) {  
                                                          console.log(JSON.stringify(res))  
                                              uni.notifyBLECharacteristicValueChange({  
                                                state: true, // 启用 notify 功能  
                                                // 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接  
                                                deviceId:DeviceID,  
                                                // 这里的 serviceId 需要在 getBLEDeviceServices 接口中获取  
                                                serviceId:this.ServiceUUID,  
                                                // 这里的 characteristicId 需要在 getBLEDeviceCharacteristics 接口中获取  
                                                characteristicId:self.characteristicId,  
                                                success(res) {  
                                                  console.log('notifyBLECharacteristicValueChange success', res.errMsg)  
                                                          uni.showToast({  
                                                              title: '开启蓝牙连接',  
                                                              duration: 2000  
                                                                      });  
                                              },  
                                              fail(res) {  
                                                      console.log(JSON.stringify(res))  
                                                          }  
                                              })  
                                              },  
                                              fail(res){  
                                               console.log(JSON.stringify(res))   
                                              }  
                                                          })  
                                          },  
                                          fail(res){  
                                                  console.log(JSON.stringify(res))   
                                          }  
                              })  
                              },1000)  
                                },  
                                fail(res) {  
                                  console.log(res)  
                                }  
                              })                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
                            }  
                          })  
                        })  
                      }  
                    })  
                  }, fail(res) {  
                    console.log(res)  
                    if (res.errCode == 10001) {  
                      uni.showToast({  
                        title: '蓝牙未打开',  
                        duration: 2000,  
                      })  
                    } else {  
                      uni.showToast({  
                        title: res.errMsg,  
                        duration: 2000,  
                      })  
                    }  
                  }  
                })

• 蓝牙连接成功后就是发送指令了,发送二进制数据

  SendChange: function () {//开锁  
                    var self = this  
  
                    // 向蓝牙设备发送一个0x00的16进制数据  
                              let buffer = new ArrayBuffer(8)  
                              let dataView = new DataView(buffer)  
                              dataView.setUint8(0, 0x20)//开锁指令  
                              dataView.setUint8(1, 0x05)//字节  
                              dataView.setUint8(2, 0x0A)//指令  
                              dataView.setUint8(3, 0x0A)//指令  
                              dataView.setUint8(4, 0x05)//指令  
                              dataView.setUint8(5, 0x05)//指令  
                              dataView.setUint8(6, 0x00)//指令  
                             //算法,逢10进1,A到F（或a~f）表示，其中:A~F表示10~15  
                              //20等于32,32+05+10+10+5+5+0 = 67  
                              dataView.setUint8(7, 0x43)  
                              uni.writeBLECharacteristicValue({  
                                  // 这里的 deviceId 需要在 getBluetoothDevices 或 onBluetoothDeviceFound 接口中获取  
                                  deviceId:self.DeviceID,  
                                  // 这里的 serviceId 需要在 getBLEDeviceServices 接口中获取  
                                  serviceId:self.ServiceUUID,  
                                  // 这里的 characteristicId 需要在 getBLEDeviceCharacteristics 接口中获取  
                                  characteristicId:self.characteristicId,  
                                  // 这里的value是ArrayBuffer类型  
                                  value: buffer,  
                                  success(res) {  
                                      console.log('writeBLECharacteristicValue success', res.errMsg)  
                                      uni.showToast({  
                                              title: '开锁',  
                                              duration: 2000  
                                      });  
                                  },  
                                  fail(res) {  
                                      console.log(JSON.stringify(res))  
                                      console.log(JSON.stringify(buffer))  
                                  }  
                              })  
                  },  
                  CloseChange: function () {//关锁  
                    var self = this  
  
                    // 向蓝牙设备发送一个0x00的16进制数据  
                              let buffer = new ArrayBuffer(8)  
                              let dataView = new DataView(buffer)  
                              dataView.setUint8(0, 0x20)  
                              dataView.setUint8(1, 0x05)  
                              dataView.setUint8(2, 0x0A)  
                              dataView.setUint8(3, 0x0A)  
                              dataView.setUint8(4, 0x05)  
                              dataView.setUint8(5, 0x05)  
                              dataView.setUint8(6, 0x01)  
                              dataView.setUint8(7, 0x44)  
                              uni.writeBLECharacteristicValue({  
                                  // 这里的 deviceId 需要在 getBluetoothDevices 或 onBluetoothDeviceFound 接口中获取  
                                  deviceId:self.DeviceID,  
                                  // 这里的 serviceId 需要在 getBLEDeviceServices 接口中获取  
                                  serviceId:self.ServiceUUID,  
                                  // 这里的 characteristicId 需要在 getBLEDeviceCharacteristics 接口中获取  
                                  characteristicId:self.characteristicId,  
                                  // 这里的value是ArrayBuffer类型  
                                  value: buffer,  
                                  success(res) {  
                                      console.log('writeBLECharacteristicValue success', res.errMsg)  
                                      uni.showToast({  
                                              title: '关锁',  
                                              duration: 2000  
                                      });  
                                  },  
                                  fail(res) {  
                                      console.log(JSON.stringify(res))  
                                      console.log(JSON.stringify(buffer))  
                                  }  
                              })  
                  },

  文章有缺陷,因为蓝牙的指令文档被我搞不见了,只能通过理解写给大家看,希望能帮到大家,谢谢