123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797 |
- <html lang="zh-CN">
- <head>
- <title>外部H5 jssdk demo页面</title>
- <meta charset="utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <meta name="viewport" content="width=device-width, initial-scale=1,viewport-fit=cover" />
- <meta name="format-detection" content="telephone=yes">
- <style>
- html {
- overflow-y: auto;
- }
- body {
- padding: 0 10px;
- overflow-y: auto;
- }
- button {
- background: #2196F3;
- text-align: center;
- margin: 10px 0;
- padding: 5px 10px;
- border-radius: 5px;
- color: #fff;
- display: block;
- width: 100%;
- border: none;
- }
- #userInfo {
- background: #FF5722;
- color: #fff;
- margin: 10px 0;
- word-break: break-all;
- }
- #jump {
- position: absolute;
- bottom: 10px;
- transform: translateY(-50%);
- right: 10px;
- background: red;
- color: #fff;
- border-radius: 10px;
- font-size: 12px;
- padding: 5px 10px;
- }
- </style>
- <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
- <!-- <script src="../../src/ls-sdk.js"></script> -->
- <script src="https://cdn-prod.internetofcity.cn/jssdk/jlingxi-1.0.9.min.js"></script>
- <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
- <script>
- // init vConsole
- var vConsole = new VConsole();
- </script>
- <script>
- var appId = 'B1334087658781568';
- var userAccessToken = "";
- //授权
- async function handleAuthorization() {
- console.log('start');
- userAccessToken = "";
- // 应该由服务端发起请求
- var rt = await fetchInitCode({
- });
- console.log('rt', rt);
- rt = JSON.parse(rt)
- var data = rt.data;
- console.log('ls',ls);
- console.log('到这里了0');
-
- //成功回调
- ls.ready(function() {
- console.log('到这里了1');
- //自定义逻辑,如:
- //1.调用 JSSDK 里提供的交互方法
- //2.如需获取用户信息,需要在此处调用 ls.userAuth(Objectobject)方法获取requestCode。
- // userAuth根据appid会自动判断是否需要登录、认证和授权。
- ls.userAuth({
- appId: appId, //从开放平台申请到的 appId
- }, function (res) {
- console.log(res)
- if (res.code === 200) {
- requestCode = res.data.requestCode; //获取到requestcode
- } else if (res.code === 9005) {
- // 认证失败或登录失败
- console.log('认证失败或登录失败')
- alert('认证失败或登录失败')
- // 如果在此处调用ls.close()关闭页面,需要延迟0.5秒执行,否则ls.close()会无效。
-
- } else {
- // 其余情况
- alert('userAuth error')
- // 如果在此处调用ls.close()关闭页面,需要延迟0.5秒执行,否则ls.close()会无效。
- }
- });
- });
- console.log('到这里了5');
- ls.error(function (e) {
- alert(e)
- });
- console.log('到这里了6');
- // 确保ready方法初始化以后调用config方法
- ls.config({
- debug: true, //开发时建议把调试模式开启
- appId: appId,
- initCode: data.initCode,
- });
- console.log('到这里了end');
- alert('end')
- }
- //获取用户信息
- async function getUserInfo() {
- // if (!userAccessToken ) {
- // alert("no userAccessToken");
- // return;
- // }
- // if (!requestCode) {
- // alert("no requestCode");
- // return;
- // }
- console.log('getUserInfo:',requestCode,userAccessToken);
-
- if (!userAccessToken && !requestCode) {
- alert("请先授权");
- return;
- }
- //授权过了无需再重复获取userAccessToken
- if (!userAccessToken) {
- //获取用户访问令牌 userAccessToken
- var userAccess = await fetchUserAccessToken(requestCode);
- userAccessToken = userAccess.data.data.userAccessToken;
- }
- //获取用户信息 userInfo
- var user = await fetchUserInfo(userAccessToken);
- if (user.data.code == 200) {
- var userInfo = user.data.data;
- document.getElementById('userInfo').append(JSON.stringify(userInfo));
- } else {
- alert(user.data.info)
- }
- }
- const baseUrl = 'http://localhost:9001/'
- // 使用ajax的方法
- function httpPostLocaltion(url, data) {
- console.log('请求', url);
- return new Promise((resolve, reject) => {
- const xhr = new XMLHttpRequest();
- xhr.open('post', url, true);
- xhr.onreadystatechange = function () {
- if (xhr.readyState === 4) {
- // console.log('获取数据1', xhr.response);
- if (xhr.status === 200) {
- // alert(xhr.responseText);
- // return xhr.response
- resolve(xhr.response);
- } else {
- reject('异常失败', xhr.status)
- }
- }
- }
- // const data = {
- // name:'zt'
- // }
- xhr.send(JSON.stringify(data));
- });
- // // 注意,设置请求头的信息必须写在下面,否则会报错
- // // 设置以json传参
- // xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
- // // 解决跨域问题
- // xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
- // // 设置请求体携带的参数
- }
- function test() {
- // httpPostLocaltion("http://localhost:9001/wx/LingXiConnectController/initCode", {}).then((e) => {
- // // console.log('this..............');
- // console.log('获取数据', e);
- // })
- return fetchUserAccessToken('ssdfs')
- }
- async function fetchInitCode(option) {
- return httpPostLocaltion("http://localhost:9001/wx/LingXiConnectController/initCode", option)
- }
- async function fetchUserAccessToken(requestCode) {
- alert(111)
- return httpPostLocaltion("https://testapi.internetofcity.cn/api/auth/open-platform/request-code/check", {requestCode:requestCode})
- // return await axios.post('https://testapi.internetofcity.cn/api/auth/open-platform/request-code/check', {
- // requestCode
- // });
- }
- async function fetchUserInfo(userAccessToken) {
- return await axios.post('https://testapi.internetofcity.cn/api/auth/open-platform/user-info/get', {
- userAccessToken
- });
- }
- function handlePay() {
- ls.lsPay({
- orderId: 'xxx',
- version: '' // version为2:新版支付;空:老版支付
- }, (res) => { })
- }
- function handlePreviewFile() {
- ls.previewFile({
- url: 'http://super-app-resource-test-new.oss-cn-north-2-gov-1.aliyuncs.com/test/lxsdk_%E5%BC%80%E6%94%BE%E5%B9%B3%E5%8F%B0API%E6%8E%A5%E5%85%A5%E6%96%87%E6%A1%A3.pdf'
- }, (res) => { })
- }
- function handleOpenSystemBroswer() {
- ls.openSystemBroswer({
- url: 'http://www.baidu.com'
- }, (res) => { })
- }
- function handleOpenWxMini() {
- ls.openWxMini({
- userName: 'gh_9281387f863a',
- path: 'pages/index/index'
- }, (res) => { })
- }
- function lsqrCode() {
- ls.qrCode(function (res) {
- alert(JSON.stringify(res))
- })
- };
- function lsclose() {
- // console.log('lsclose', ls.close)
- console.log('window.bridge', window.bridge)
- ls.close();
- }
- function lscallNo() {
- ls.callNo({
- tel: '88888888'
- })
- }
- function lslocation() {
- ls.location({
- type: 'gcj02'
- }, function (res) {
- alert(JSON.stringify(res))
- });
- }
- function lsCheckIdentity() {
- ls.checkIdentity({
- type: '2',
- appId: 'YOUR_APP_ID'
- }, function (res) {
- alert(JSON.stringify(res))
- });
- }
- function showNav() {
- ls.navigationStatus({
- navigationShow: true,
- navigationBarBackgroundColor: "#ffffff",
- navigationBarTitleText: "业务demo",
- navigationBarTitleColor: "#000000",
- });
- }
- function hideNav() {
- ls.navigationStatus({
- navigationShow: false,
- })
- }
- function handleGetVersion() {
- console.log(ls)
- ls.getVersion(function (res) {
- alert(JSON.stringify(res))
- })
- }
- function clipboard() {
- ls.clipboard(function (res) {
- alert(JSON.stringify(res))
- })
- }
- function getRandomColor() {
- var colorValue = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];
- var s = "#";
- for (var i = 0; i < 6; i++) {
- s += colorValue[Math.floor(Math.random() * 16)];
- }
- return s;
- }
- // 上传图片鉴黄
- function handleUploadImgToCheck() {
- ls.lsUploadPhotoCheck(function (res) {
- alert(JSON.stringify(res))
- })
- }
- function handleShare(type, type1) {
- let shareObj = {}
- let mini = {
- title: '测试分享小程序',
- userName: 'gh_9281387f863a',
- icon: 'https://super-app-01.oss-cn-north-2-gov-1.aliyuncs.com/lx/images/jiayuan/jiayuan_share.jpg',
- path: 'pages/index/index'
- }
- let h5 = {
- title: '测试分享H5',
- content: '遇见最美家园无锡市#最美无锡 魅力家园#活动开始啦快来为你心中的“最美”点赞投票吧!',
- shareUrl: `https://cdn.internetofcity.cn/app/openWeapp/open-weapp.html?path=${encodeURIComponent(
- 'pages/youth/home/index/index.html'
- )}`,
- icon: 'https://super-app-01.oss-cn-north-2-gov-1.aliyuncs.com/lx/images/jiayuan/jiayuan_share.jpg',
- }
- let img = {
- title: '测试分享图片',
- content: '测试分享图片',
- image: 'https://super-app-01.oss-cn-north-2-gov-1.aliyuncs.com/lx/images/jiayuan/jiayuan.jpg',
- icon: 'https://super-app-01.oss-cn-north-2-gov-1.aliyuncs.com/lx/images/jiayuan/jiayuan_share.jpg',
- }
- // 自定义分享
- if (type === '999') {
- if (type1 === '1') {
- shareObj.data = [{
- type: type1,
- platformType: '1',
- ...h5
- },
- {
- type: type1,
- platformType: '2',
- ...h5
- }
- ]
- } else if (type1 === '3') { // 图片
- shareObj.data = [{
- type: type1,
- platformType: '1',
- ...img
- },
- {
- type: type1,
- platformType: '2',
- ...img
- }
- ]
- } else if (type1 === '2') { // 小程序
- shareObj.data = [{
- type: type1,
- platformType: '1',
- ...mini
- }]
- } else if (type1 === '1003') {
- shareObj.data = [{
- platformType: '1003',
- linkPath: 'lssmartcity://app?url=copy_action&content=https://www.baidu.com'
- }]
- }
- } else if (type === '1') { // 链接
- shareObj = h5
- } else if (type === '2') { // 小程序
- shareObj = mini
- } else if (type === '3') { // 图片
- shareObj = img
- }
- console.log({
- type,
- ...shareObj
- })
- // 2.3.1
- ls.share({
- type,
- ...shareObj
- }, function (res) { })
- }
- function handleIdCardOcr(type) {
- ls.idCardOcr({
- type: type,
- appId: 'YOUR_APP_ID'
- }, function (res) {
- alert(JSON.stringify(res))
- })
- }
- function handlemapNavi() {
- ls.lsMapNavi({
- lng: '120.301663',
- lat: '31.574729',
- name: '',
- }, function (res) {
- alert(JSON.stringify(res))
- })
- }
- function handleStartVoiceRecognizer() {
- ls.lsStartVoiceRecognizer(function (res) {
- alert(JSON.stringify(res))
- })
- }
- function handleStopVoiceRecognizer() {
- ls.lsStopVoiceRecognizer(function (res) {
- alert(JSON.stringify(res))
- })
- }
- function handleSavePhoto() {
- ls.lsSavePhoto({
- url: 'http://super-app-01.oss-cn-north-2-gov-1.aliyuncs.com/lx/images/medicare/bottom-top.png'
- }, function (res) {
- alert(JSON.stringify(res))
- })
- }
- function handlePrint() {
- ls.lxPrint({
- contents: [
- {
- "printerCmd": 1
- },
- {
- "value": 1,
- "printerCmd": 10
- },
- {
- "value": 1,
- "printerCmd": 8
- },
- {
- "width": 0,
- "printerCmd": 14,
- "height": 0
- },
- {
- "printerCmd": 0,
- "text": "无锡市统一公共支付平台缴费通知单"
- },
- {
- "printerCmd": 1
- },
- {
- "value": 0,
- "printerCmd": 8
- },
- {
- "printerCmd": 0,
- "text": "2021年12月14日"
- },
- {
- "printerCmd": 1
- },
- {
- "printerCmd": 1
- },
- {
- "value": 0,
- "printerCmd": 10
- },
- {
- "value": 30,
- "printerCmd": 25
- },
- {
- "printerCmd": 0,
- "text": "【执收单位】:"
- },
- {
- "value": 200,
- "printerCmd": 25
- },
- {
- "printerCmd": 0,
- "text": "无锡灵锡大数据有限公司无锡灵锡大数据有限公司无锡灵锡大数据有限公司无锡灵锡大数据有限公司无锡灵锡大数据有限公司"
- },
- {
- "printerCmd": 1
- },
- {
- "printerCmd": 1
- },
- {
- "value": 30,
- "printerCmd": 25
- },
- {
- "printerCmd": 0,
- "text": "【缴款识别码】:"
- },
- {
- "value": 200,
- "printerCmd": 25
- },
- {
- "printerCmd": 0,
- "text": "WXLX233333333333333"
- },
- {
- "printerCmd": 1
- },
- {
- "printerCmd": 1
- },
- {
- "value": 30,
- "printerCmd": 25
- },
- {
- "printerCmd": 0,
- "text": "【缴费人】:"
- },
- {
- "value": 200,
- "printerCmd": 25
- },
- {
- "printerCmd": 0,
- "text": "无锡市雪浪小镇管委会"
- },
- {
- "printerCmd": 1
- },
- {
- "printerCmd": 1
- },
- {
- "value": 30,
- "printerCmd": 25
- },
- {
- "printerCmd": 0,
- "text": "【收款人】:"
- },
- {
- "value": 200,
- "printerCmd": 25
- },
- {
- "printerCmd": 0,
- "text": "无锡市财政局"
- },
- {
- "printerCmd": 1
- },
- {
- "printerCmd": 1
- },
- {
- "value": 30,
- "printerCmd": 25
- },
- {
- "printerCmd": 0,
- "text": "【收款银行】:"
- },
- {
- "value": 200,
- "printerCmd": 25
- },
- {
- "printerCmd": 0,
- "text": "无锡市农村商业银行滨湖支行"
- },
- {
- "printerCmd": 1
- },
- {
- "printerCmd": 1
- },
- {
- "value": 30,
- "printerCmd": 25
- },
- {
- "printerCmd": 0,
- "text": "【收款账号】:"
- },
- {
- "value": 200,
- "printerCmd": 25
- },
- {
- "printerCmd": 0,
- "text": "214000233333333333"
- },
- {
- "printerCmd": 1
- },
- {
- "printerCmd": 1
- },
- {
- "value": 30,
- "printerCmd": 25
- },
- {
- "printerCmd": 0,
- "text": "【收款金额】:"
- },
- {
- "value": 200,
- "printerCmd": 25
- },
- {
- "printerCmd": 0,
- "text": "2333.00"
- },
- {
- "printerCmd": 1
- },
- {
- "printerCmd": 1
- },
- {
- "value": 0,
- "printerCmd": 25
- },
- {
- "value": 1,
- "printerCmd": 10
- },
- {
- "printerCmd": 0,
- "text": "————————————————————"
- },
- {
- "printerCmd": 1
- },
- {
- "printerCmd": 1
- },
- {
- "size": 12,
- "printerCmd": 27,
- "level": 1,
- "text": "http:\/\/www.baidu.com"
- },
- {
- "printerCmd": 1
- },
- {
- "printerCmd": 0,
- "text": "使用灵锡App扫码支付"
- },
- {
- "printerCmd": 1
- },
- {
- "printerCmd": 0,
- "text": "————————————————————"
- },
- {
- "printerCmd": 1
- },
- {
- "printerCmd": 1
- },
- {
- "size": 12,
- "printerCmd": 27,
- "level": 1,
- "text": "http:\/\/www.baidu.com"
- },
- {
- "printerCmd": 1
- },
- {
- "printerCmd": 0,
- "text": "使用灵锡App扫码支付"
- },
- {
- "printerCmd": 1
- },
- {
- "printerCmd": 1
- },
- {
- "printerCmd": 1
- }
- ]
- }, function (res) {
- alert(JSON.stringify(res))
- });
- }
- function handleConnectPrinter() {
- ls.lxPrinterConnect(function (res) {
- alert(JSON.stringify(res))
- })
- }
- function handleCheckScheme() {
- console.log(ls.lxCheckScheme)
- ls.lxCheckScheme({
- scheme: 'xxx'
- }, function (res) {
- alert(JSON.stringify(res))
- })
- }
- function handleAbcPay() {
- ls.bankAbcPay({
- TokenID: '12345'
- }, function (res) {
- alert(JSON.stringify(res))
- })
- }
- function handleInjectYySdk() {
- ls.injectYySdk({}, function (res) {
- alert(JSON.stringify(res))
- })
- }
- </script>
- <body>
- <button onClick="test()" style="background:green">测试test</button>
- <button onClick="handleAuthorization()" style="background:green">授权2222</button>
- <span style="color:red;font-size:12px;font-weight:500">每次站点入口需重新请求授权,不要用自己缓存的用户信息,会导致app切换用户或者注销时用户信息不对</span>
- <button onClick="getUserInfo()" style="background:green">获取用户信息</button>
- <p style="font-size:12px;padding-bottom: 10px;">用户令牌(userAccessToken)自行做缓存处理,本案例暂不实现</p>
- <button onClick="window.location.reload()">刷新</button>
- <button onClick="lsclose()">关闭页面</button>
- <button onClick="lscallNo()">拨打电话</button>
- <!-- <button onClick="lsshare()">分享</button> -->
- <button onClick="lsqrCode()">打开摄像头扫码</button>
- <button onClick="lslocation()">获取地理位置信息</button>
- <button onClick="ls.goback()">返回上一级</button>
- <button onClick="showNav()">显示导航栏</button>
- <button onClick="hideNav()">隐藏导航栏</button>
- <button onClick="clipboard()">剪贴</button>
- <button onClick="handlePay()">灵锡支付</button>
- <button onClick="lsCheckIdentity()">人脸校验</button>
- <button onClick="handleGetVersion()">获取App版本</button>
- <button onClick="handlePreviewFile()">文件预览</button>
- <button onClick="handleOpenSystemBroswer()">打开系统浏览器</button>
- <button onClick="handleOpenWxMini()">打开微信小程序</button>
- <button onClick="handleShare('1')">分享H5</button>
- <button onClick="handleShare('2')">分享小程序</button>
- <button onClick="handleShare('3')">分享图片</button>
- <button onClick="handleShare('999', '1')">自定义分享:h5</button>
- <button onClick="handleShare('999', '2')">自定义分享:小程序</button>
- <button onClick="handleShare('999', '3')">自定义分享:图片</button>
- <button onClick="handleShare('999', '1003')">自定义分享:复制url</button>
- <button onClick="handleUploadImgToCheck()">上传图片鉴黄</button>
- <button onClick="handlemapNavi()">导航</button>
- <button onClick="handleStartVoiceRecognizer()">语音识别,开始</button>
- <button onClick="handleStopVoiceRecognizer()">语音识别,结束</button>
- <button onClick="handleSavePhoto()">保存图片</button>
- <button onClick="handlePrint()">打印</button>
- <button onClick="handleConnectPrinter()">连接打印机</button>
- <button onClick="handleIdCardOcr('face')">身份证OCR-face</button>
- <button onClick="handleIdCardOcr('back')">身份证OCR-back</button>
- <button onClick="handleAbcPay()">农行支付</button>
- <button onClick="handleCheckScheme()">检查是否安装白名单程序</button>
- <button onClick="handleInjectYySdk()">注入一元sdk</button>
- <input type="file" capture="camera" accept='image/*'>
- <div id="userInfo"></div>
- <div onClick="window.location.href='./h1.html'" id="jump">二级页面</div>
- </body>
- </html>
|