如果app的代码需要移植到小程序，你会怎么办？使用uniapp，乖乖移植，还是使用web-view来进行快速更新？

众所周知，微信小程序的WebView不能直接调用微信小程序的原生接口如定位，拍照等。这时候聪明的你可能会说，那我使用postManager来进行双向通信不就行了？但如果那么简单的话也就不会有这篇文章了，因为微信小程序的WebView的通信很奇葩，举个例子，webview向小程序发送的消息，只能在小程序页面开启，销毁，分享等几个事件才会触发，换而言之，就是webview实现不了实时通信。

本文的js-sdk就是web-view使用原生API的方式（可能没有之一），那么，本文着重于两点：

怎么使用js-sdk来调用原生接口
怎么使用测试号，抛弃后端来测试这些功能

第一点相信大家很简单就可以get到，但是第二点是什么意思？测试号？抛弃后端？

答案是这样的，因为使用js-sdk并不是引入一个js就可以了，还需要公众号的appId配合，但这可就难倒了我，我只是先试一下这个技术点，没有这些东西呀。经过我的不懈查找，才发现了一个可以不需要公众号appId，简单测试的方法，现在分享出来。

使用js-sdk来调用原生接口

这部分放在最前面主要是为了让大家可以先看到效果，而且这部分相对也比较简单。那么，让我们来试试吧：

首先，肯定是web-view的代码了，这个最基础也最简单

wxml
<web-view src="<http://192.168.31.205:5173/>" />

从这里开始，基本都是h5项目的代码,h5使用vite框架，其他框架的引入也都大同小异，纯html代码可以去官网引入sdk的js来实现,我在这里写一个最简单的调用定位方法，下面再进行优化

// 首先 引入js依赖包
yarn add weixin-js-sdk

// wx-sdk.js
import wx from "weixin-js-sdk"

export const initWxConfig = () => {
    wx.config({
        debug: false,
        appId: appId,
        timestamp: 0,
        nonceStr: '',
        signature: '',
        jsApiList: ['getLocation']
    })
}
export const getLocation = () => {
    initWxConfig()
    return new Promise((resolve, reject) => {
        wx.ready(() => {
            wx.getLocation({
                type: 'wgs84',
                success: function (res:WXLocationParams) {
                    resolve(res)
                }
            })
        })
    })
}

从这里就完成了一个最简单的demo，是不是很简单？现在开始讲解一下：

调用js-sdk其实很简单，只需要调用wx.config，然后再调用对应的API即可。那么你可能会有的几个疑问我给大家一一解答？

wx.config配置的获取，这个暂时先不考虑，在下文会介绍怎么获取
为什么需要wx.ready?因为wx.config的校验是一个异步的过程，所以如果刚调完wx.config就直接调用接口的话，会报校验失败的错误
是不是每次都需要wx.ready？这个分两种情况，ios和安卓。所以这个会是大一点的内容，在下文会有提及

那么到这里我们已经知道了怎么去调用一个最简单的demo，那么js-sdk还有什么接口可以访问呢？可以看看下面这个参考链接：

参考链接

是否每次都需要ready？

这个我们需要明白一个基本原则，那就是wx.ready 是因为wx.config 是异步的，所以才需要添加这个异步函数。所以，config函数调用，就需要加ready。这里就得提一下安卓和ios的区别了。这里是因为安卓和ios对路由处理方式的不同，简单来说。ios可以在app.vue中进行config即可，但安卓需要在每个页面的created事件中进行config。

测试号的获取

那么就到了最重要的测试号的获取过程了，什么是测试号呢？因为wx.config需要公众号的appId等数据，但是如果我们没有公众号的话就测试不了了。所以微信提供了一个测试平台，具体步骤看下文即可：

1. 登录测试平台获取测试号

微信测试平台

2. 获取accessToken和jsapi_ticket

通过下面链接和测试平台获取到的appid和secret,可以请求下面链接获取需要的数据，链接请求可以通过网页直接请求或者axios请求都可：

1. 获取access_token 下面占位符请自行填充
<https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}>
请求返回：
{
  "access_token": "",
  "expires_in": 0
}

2. 通过第一个链接返回的access_token进行获取
<https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${access_token}&type=jsapi>

{
  "errcode": 0,
  "errmsg": "ok",
  "ticket": "",
  "expires_in": 7200
}

3. 通过微信官方的解析demo来进行签名算法

示例demo地址

下载zip包完成之后，解压可以获取官方的解析demo。因为我们是前端，所以使用node文件夹里面的解析算法

进入node文件夹之后先npm i安装
修改文件夹内check_sign.js

var sign = require('./sign.js');

// url需要和webview的域名一致 
// 第二个是url，是你web-view的url！！！
console.log(sign('自己从上方获取的ticket签名', '<http://192.168.31.205:5173/>'));
/*
 *something like this
 *{
 *  jsapi_ticket: 'jsapi_ticket',
 *  nonceStr: '82zklqj7ycoywrk',
 *  timestamp: '1415171822',
 *  url: '<http://example.com>',
 *  signature: '1316ed92e0827786cfda3ae355f33760c4f70c1f'
 *}
 */

在终端中输入node check_sign.js

会获取如下数据，然后自行填充到config里面即可
{
  jsapi_ticket: '',
  nonceStr: '',
  timestamp: '',
  url: '<http://192.168.31.205:5173/>',
  signature: ''
}

webview的一些坑

ios显示不了webview图片问题

不支持直接用localId显示图片，需要用getLocalImgData API获取base64码进行显示

微信小程序+webview 双指捏合缩小问题

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

微信小程序WebView使用js-sdk详解（包含测试号）