amis 引入微信JSSDK
梁楷
amis生成的移动端表单,如果在微信浏览器里使用,可以引入微信JSSDK,这样就可以调用微信的能力,例如很实用的扫码功能或者定位功能.
以下代码是用官方的示例来做的简单修改,其实就是把JS以字符串的形式拼接起来了.
这里$.post('/sign',{},function(data,stauts){}.......)调用的sign是后端签名接口.就不在里讨论了.
注意需要添加以下引用
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>完整代码如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>amis demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link rel="stylesheet" href="\sdk\sdk.css" />
<link rel="stylesheet" href="\sdk\helper.css" />
<link rel="stylesheet" href="\sdk\iconfont.css" />
<!-- 这是默认主题所需的，如果是其他主题则不需要 -->
<!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11，如果要支持 IE11 请引用这个 css，并把前面那个删了 -->
<!-- <link rel="stylesheet" href="sdk-ie11.css" /> -->
<!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果，所以可能有细节功能用不了，如果发现请报 issue -->
<style>
html,
body,
.app-wrapper {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="root" class="app-wrapper"></div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="\sdk\sdk.js"></script>
<script type="text/javascript">
(function () {
let amis = amisRequire('amis/embed');
// 通过替换下面这个配置来生成不同页面
let amisJSON = {
type: 'page',
title: '表单页面',
body:
{
"type": "page",
"body": {
"type": "form",
"title": "custom 组件",
"body": [
{
"type": "input-text",
"name": "username",
"label": "姓名"
},
{
"name": "username",
"type": "custom",
"label": "自定义组件",
"onMount": "const button = document.createElement('button'); "
+"button.innerText = '点击扫码'; "
+"button.onclick = event => {"
+"console.log('调用JQ');"
+"$.post('/sign',{},function(data,stauts){"
+"console.log('结果是:'+JSON.stringify(data));"
+" wx.config({beta: true,debug: false,appId: data.appId,timestamp: data.timestamp,nonceStr: data.nonceStr,signature: data.signature,jsApiList: ['scanQRCode'] });"
+" wx.ready(function () {"
+" wx.scanQRCode({"
+" needResult: 1, "
+" success: function (res) {"
+" let data = res.resultStr; "
+" onChange(data); "
+" event.preventDefault(); "
+" },"
+" });"
+"});"
+"},'json');"
+"}; "
+"dom.appendChild(button);"
}
]
}
}
};
let amisScoped = amis.embed('#root', amisJSON);
})();
</script>
</body>
</html>
类似资料：