优化

common/jswx.js

@@ -1,23 +0,0 @@
-import jswx from 'weixin-js-sdk'
-import sign from './sign.js'
-console.log('jswx===>>', jswx)
-console.log('sign===>>', sign)
-const appid = "wxe7a47acc00b6aa5d";
-const appSecret = "11d94f98e6dd0e09a5b7872fb88fdb91";
-// 初始化微信配置
-jswx.config({
-  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
-  appId: '', // 必填，公众号的唯一标识
-  timestamp: '', // 必填，生成签名的时间戳
-  nonceStr: '', // 必填，生成签名的随机串
-  signature: '', // 必填，签名
-  jsApiList: [] // 必填，需要使用的JS接口列表
-});
-jswx.ready(function(res) {
-  console.log('res===>', res)
-  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
-});
-jswx.error(function(error) {
-  console.log('error===>>', error)
-  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
-});

common/sign.js

@@ -1,48 +0,0 @@
-const createNonceStr = function () {
-  return Math.random().toString(36).substr(2, 15);
-};
-
-const createTimestamp = function () {
-  return parseInt(new Date().getTime() / 1000) + '';
-};
-
-const raw = function (args) {
-  const keys = Object.keys(args);
-  keys = keys.sort()
-  const newArgs = {};
-  keys.forEach(function (key) {
-    newArgs[key.toLowerCase()] = args[key];
-  });
-
-  const string = '';
-  for (const k in newArgs) {
-    string += '&' + k + '=' + newArgs[k];
-  }
-  string = string.substr(1);
-  return string;
-};
-
-/**
-* @synopsis 签名算法 
-*
-* @param jsapi_ticket 用于签名的 jsapi_ticket
-* @param url 用于签名的 url ，注意必须动态获取，不能 hardcode
-*
-* @returns
-*/
-const sign = function (jsapi_ticket, url) {
-  const ret = {
-    jsapi_ticket: jsapi_ticket,
-    nonceStr: createNonceStr(),
-    timestamp: createTimestamp(),
-    url: url
-  };
-  const string = raw(ret);
-      jsSHA = require('jssha');
-      shaObj = new jsSHA(string, 'TEXT');
-  ret.signature = shaObj.getHash('SHA-1', 'HEX');
-
-  return ret;
-};
-
-module.exports = sign;

common/wx/jswx.js

@@ -0,0 +1,93 @@
+import wx from 'weixin-js-sdk'
+import sign from './sign.js'
+
+const baseWxUrl = "https://api.weixin.qq.com/cgi-bin"
+const appId = "wxe7a47acc00b6aa5d";
+const appSecret = "11d94f98e6dd0e09a5b7872fb88fdb91";
+
+const requestFun = ({
+  method = 'GET',
+  url,
+  data
+}) => {
+  return new Promise((resolve, reject) => {
+    uni.request({
+      url: baseWxUrl + url, //仅为示例，并非真实接口地址。
+      data: data,
+      method: method,
+      success: (res) => {
+        resolve(res.data)
+      },
+      fail: (err) => {
+        console.log('err=>', err)
+      }
+    });
+  })
+}
+const getWXToken = () => {
+  requestFun({
+    url: '/token',
+    data: {
+      grant_type: 'client_credential',
+      appid: appId,
+      secret: appSecret
+    }
+  }).then(res => {
+    if (res) {
+      getWXJSTicket(res)
+      uni.setStorage({
+        key: 'wx_access_token',
+        data: res.access_token
+      })
+    }
+  })
+}
+const getWXJSTicket = (data) => {
+  requestFun({
+    url: '/ticket/getticket',
+    data: {
+      access_token: data.access_token,
+      type: 'jsapi',
+    }
+  }).then(res => {
+    if (res && res.errmsg == "ok") {
+      uni.setStorage({
+        key: 'wx_js_ticket',
+        data: res.ticket
+      })
+      const initData = sign(res.ticket, location.href.split('#')[0])
+      initWX(initData)
+    }
+  })
+}
+getWXToken()
+
+// 初始化微信配置
+const initWX = (data) => {
+  wx.config({
+    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
+    appId: appId, // 必填，公众号的唯一标识
+    timestamp: data.timestamp, // 必填，生成签名的时间戳
+    nonceStr: data.nonceStr, // 必填，生成签名的随机串
+    signature: data.signature, // 必填，签名
+    jsApiList: ['chooseImage', 'checkJsApi'], // 必填，需要使用的JS接口列表
+    openTagList: ['wx-open-launch-app'] // 可选，需要使用的开放标签列表
+  });
+  wx.ready(function() {
+    const openData = {
+      jsApiList: ['wx-open-launch-app'],
+      success: (success) => {
+        console.log('微信开放标签成功---', success)
+      },
+      fail: (fail) => {
+        console.log('微信开放标签失败---', fail)
+      }
+    }
+    wx.checkJsApi(openData)
+    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
+  });
+  wx.error(function(error) {
+    console.log('error===>>', error)
+    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
+  });
+}

common/wx/sign.js

@@ -0,0 +1,49 @@
+import jsSHA from './sha.js'
+
+const createNonceStr = function() {
+  return Math.random().toString(36).substr(2, 15);
+};
+
+const createTimestamp = function() {
+  return parseInt(new Date().getTime() / 1000) + '';
+};
+
+const raw = function(args) {
+  let keys = Object.keys(args);
+  keys = keys.sort()
+  let newArgs = {};
+  keys.forEach(function(key) {
+    newArgs[key.toLowerCase()] = args[key];
+  });
+
+  let string = '';
+  for (let k in newArgs) {
+    string += '&' + k + '=' + newArgs[k];
+  }
+  string = string.substr(1);
+  return string;
+};
+
+/**
+ * @synopsis 签名算法 
+ *
+ * @param jsapi_ticket 用于签名的 jsapi_ticket
+ * @param url 用于签名的 url ，注意必须动态获取，不能 hardcode
+ *
+ * @returns
+ */
+const sign = function(jsapi_ticket, url) {
+  let ret = {
+    jsapi_ticket: jsapi_ticket,
+    nonceStr: createNonceStr(),
+    timestamp: createTimestamp(),
+    url: url
+  };
+  let string = raw(ret);
+  let shaObj = new jsSHA(string, 'TEXT');
+  ret.signature = shaObj.getHash('SHA-1', 'HEX');
+
+  return ret;
+};
+
+module.exports = sign;

main.js

@@ -19,7 +19,7 @@ import ldLoading from '@/components/ld-loading/index.vue';
 import nodata from '@/components/noData/nodata.vue';
 import loadMore from '@/components/uni-load-more/uni-load-more.vue';
 import Directives from './directives/index.js';
-// import '@/common/jswx.js'
+import '@/common/wx/jswx.js'
 // 网络状态监听
 // uni.getNetworkType({
 // 	success: res => {
@@ -32,9 +32,11 @@ import Directives from './directives/index.js';
 // 	store.dispatch('networkStateChange', res.networkType);
 // });
 
+Vue.config.ignoredElements.push('wx-open-launch-app')
 if (process.env.NODE_ENV === 'production') {
   Vue.config.productionTip = false;
-  Vue.config.ignoredElements.push('wx-open-launch-weapp')
+  Vue.config.ignoredElements.push('wx-open-launch-app')
+  // Vue.config.ignoredElements.push('wx-open-launch-weapp')
 }
 
 

package.json

@@ -14,7 +14,6 @@
     },
     "dependencies": {
         "clipboard": "^2.0.6",
-        "jssha": "^3.3.1",
         "lite-server": "^2.6.1",
         "uview-ui": "^2.0.36",
         "weixin-js-sdk": "^1.6.5"

pages/down.vue

@@ -1,149 +1,149 @@
 <template>
-	<view class="bg">
-		<!-- <navbar backColor="#fff" :config="config"></navbar> -->
-		<!-- v-if="showHint" -->
-		<view class="view-alert" v-if="showHint">
-			<view class="alert-text">
-				点击右上角按钮，然后在弹出的菜单中，点击在浏览器中打开，即可下载安装
-			</view>
-			<image class="alert-arrow" src="../static/alert-arrow.png" mode="aspectFit"></image>
-		</view>
+  <view class="bg">
+    <!-- <navbar backColor="#fff" :config="config"></navbar> -->
+    <!-- v-if="showHint" -->
+    <view class="view-alert" v-if="showHint">
+      <view class="alert-text">
+        点击右上角按钮，然后在弹出的菜单中，点击在浏览器中打开，即可下载安装
+      </view>
+      <image class="alert-arrow" src="../static/alert-arrow.png" mode="aspectFit"></image>
+    </view>
 
-		<view class="top-box">
-			<image src="/static/down/downApps.png" mode="aspectFit" class="logo"></image>
-		</view>
-		<view class="btn-row">
-			<button class="btn" @click="downLoad(0)" v-if="osName == 'android'">
-				<image src="/static/login/btn_01.png" mode="aspectFit" class="logo"></image>
-				<text>安卓下载</text>
-			</button>
-			<button class="btn" @click="downLoad(1)" v-if="osName == 'ios'">
-				<image src="/static/login/btn_02.png" mode="aspectFit" class="logo"></image>
-				<text>IOS下载</text>
-			</button>
-			<button class="btn pdr0" @click.stop="onWeChat()">
-				<image src="/static/login/btn_03.png" mode="aspectFit" class="logo"></image>
-				<text>宜格服务小程序</text>
-			</button>
-		</view>
-	</view>
+    <view class="top-box">
+      <image src="/static/down/downApps.png" mode="aspectFit" class="logo"></image>
+    </view>
+    <view class="btn-row">
+      <button class="btn" @click="downLoad(0)" v-if="osName == 'android'">
+        <image src="/static/login/btn_01.png" mode="aspectFit" class="logo"></image>
+        <text>安卓下载</text>
+      </button>
+      <button class="btn" @click="downLoad(1)" v-if="osName == 'ios'">
+        <image src="/static/login/btn_02.png" mode="aspectFit" class="logo"></image>
+        <text>IOS下载</text>
+      </button>
+      <button class="btn pdr0" @click.stop="onWeChat()">
+        <image src="/static/login/btn_03.png" mode="aspectFit" class="logo"></image>
+        <text>宜格服务小程序</text>
+      </button>
+    </view>
+  </view>
 </template>
 <script>
-	export default {
-		data() {
-			return {
-				config: {
-					back: true, //false是tolbar页面 是则不写
-					title: '"宜格服务"懂宜昌，更懂你！',
-					color: "#1A1A1A",
-					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
-					backgroundColor: [1, "#fff"],
-					statusBarFontColor: "#1A1A1A",
-				},
-				appInfo: null,
-				showHint: false,
+  export default {
+    data() {
+      return {
+        config: {
+          back: true, //false是tolbar页面 是则不写
+          title: '"宜格服务"懂宜昌，更懂你！',
+          color: "#1A1A1A",
+          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
+          backgroundColor: [1, "#fff"],
+          statusBarFontColor: "#1A1A1A",
+        },
+        appInfo: null,
+        showHint: false,
         osName: uni.getSystemInfoSync().osName
-			};
-		},
-		onLoad(options) {
+      };
+    },
+    onLoad(options) {
       this.osName = uni.getSystemInfoSync().osName
-			// const ua = navigator.userAgent.toLowerCase()
-			// const isWeixin = ua.indexOf('micromessenger') != -1;
-			// this.showHint = isWeixin
-		},
+      // const ua = navigator.userAgent.toLowerCase()
+      // const isWeixin = ua.indexOf('micromessenger') != -1;
+      // this.showHint = isWeixin
+    },
 
-		methods: {
-			getData(type) {
-				this.$http.get("/app/version/newest", {
-					type: type
-				}).then((res) => {
-					if (res && res.data && res.code == 200) {
-						try{
-							if(type==0){
-								window.location = "ygfwUrlSchemes://"
-							}
-						}catch(e){}
-						window.location.href = res.data.downloadLink;
-					} else {
-						this.$mUtil.toast("暂无下载地址")
-					}
-				});
-			},
-			downLoad(type) {
-				const ua = navigator.userAgent.toLowerCase()
-				const isWeixin = ua.indexOf('micromessenger') != -1;
-				if(isWeixin){
-					this.showHint = isWeixin;
-					uni.pageScrollTo({
-						scrollTop:0
-					})
-				}else{
-					this.getData(type)
-				}
-			},
-			onWeChat() {
-				location.href='weixin://dl/business/?appid=wxe67b047223bd1446&path=pages/homeQX/index'
-			},
+    methods: {
+      getData(type) {
+        this.$http.get("/app/version/newest", {
+          type: type
+        }).then((res) => {
+          if (res && res.data && res.code == 200) {
+            try {
+              if (type == 0) {
+                window.location = "ygfwUrlSchemes://"
+              }
+            } catch (e) {}
+            window.location.href = res.data.downloadLink;
+          } else {
+            this.$mUtil.toast("暂无下载地址")
+          }
+        });
+      },
+      downLoad(type) {
+        const ua = navigator.userAgent.toLowerCase()
+        const isWeixin = ua.indexOf('micromessenger') != -1;
+        if (isWeixin) {
+          this.showHint = isWeixin;
+          uni.pageScrollTo({
+            scrollTop: 0
+          })
+        } else {
+          this.getData(type)
+        }
+      },
+      onWeChat() {
+        location.href = 'weixin://dl/business/?appid=wxe67b047223bd1446&path=pages/homeQX/index'
+      },
 
-		},
-	};
+    },
+  };
 </script>
 <style>
-	page {
-		width: 750rpx;
-		min-height: 100vh;
-		overflow: hidden;
-	}
+  page {
+    width: 750rpx;
+    min-height: 100vh;
+    overflow: hidden;
+  }
 </style>
 <style lang='scss' scopd>
-	* {
-		padding: 0;
-		margin: 0;
-	}
+  * {
+    padding: 0;
+    margin: 0;
+  }
 
-	.view-alert {
-		/* position: absolute;
+  .view-alert {
+    /* position: absolute;
 		left: 0;
 		top: 0;
 		z-index: 9; */
-		width: 750rpx;
-		background: rgb(52, 52, 52);
-		margin-left: 0px;
-		margin-right: 0px;
-		padding: 60rpx 30rpx 60rpx 60rpx;
-		box-shadow: rgba(22, 22, 23, 0.62) 0px -10px 16px inset;
-		display: flex;
-		justify-content: space-between;
-		align-items: stretch;
-		box-sizing: border-box;
+    width: 750rpx;
+    background: rgb(52, 52, 52);
+    margin-left: 0px;
+    margin-right: 0px;
+    padding: 60rpx 30rpx 60rpx 60rpx;
+    box-shadow: rgba(22, 22, 23, 0.62) 0px -10px 16px inset;
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    box-sizing: border-box;
 
-		.alert-text {
-			flex: 1;
-			color: #7f7e7e;
-			font-weight: 400 !important;
-			padding-right: 60rpx;
-			line-height: 1.5;
-		}
+    .alert-text {
+      flex: 1;
+      color: #7f7e7e;
+      font-weight: 400 !important;
+      padding-right: 60rpx;
+      line-height: 1.5;
+    }
 
-		.alert-arrow {
-			flex-shrink: 0;
-			width: 60rpx;
-			height: 60rpx;
-			margin-top: -30rpx;
-		}
-	}
+    .alert-arrow {
+      flex-shrink: 0;
+      width: 60rpx;
+      height: 60rpx;
+      margin-top: -30rpx;
+    }
+  }
 
-	.bg {
-		width: 100%;
-		min-height: 100vh;
+  .bg {
+    width: 100%;
+    min-height: 100vh;
 
-		background: url('../static/down/downBG.png') no-repeat top center;
-		background-size: 100% 100%;
-		padding-bottom: 118rpx;
-	}
+    background: url('../static/down/downBG.png') no-repeat top center;
+    background-size: 100% 100%;
+    padding-bottom: 118rpx;
+  }
 
-	.top-box {
-		/* 	position: absolute;
+  .top-box {
+    /* 	position: absolute;
 		display: flex;
 		width: 100%;
 		align-items: center;
@@ -151,58 +151,59 @@
 		top: 400rpx;
 		left: 50%;
 		transform: translateX(-50%); */
-		/* margin: 117rpx auto; */
-		padding: 117rpx 74px 0 44rpx;
-		width: 632rpx;
+    /* margin: 117rpx auto; */
+    padding: 117rpx 74px 0 44rpx;
+    width: 632rpx;
 
-		.logo {
-			width: 632rpx;
-			height: 993rpx;
-		}
-	}
+    .logo {
+      width: 632rpx;
+      height: 993rpx;
+    }
+  }
 
-	.btn-row {
-		display: flex;
-		width: 100%;
-		justify-content: space-around;
-		flex-direction: column;
-		align-items: center;
-		/* position: fixed; */
-		/* 
+  .btn-row {
+    display: flex;
+    width: 100%;
+    justify-content: space-around;
+    flex-direction: column;
+    align-items: center;
+    /* position: fixed; */
+    /* 
 		bottom: 400rpx;
 		left: 50%;
 		transform: translateX(-50%); */
 
-		.btn {
-			border-radius: 60rpx;
-			width: 401rpx;
-			height: 97rpx;
-			/* background: linear-gradient(189deg, #a7f4ff 0%, #45e3ff 100%), #edf4fc; */
-			background: linear-gradient(189deg,#bbfdbd 0%, #a4f0a4 100%), #edf4fc;
-			border-radius: 20rpx;
-			margin-top: 49rpx;
-			display: flex;
-			align-items: center;
-			/* justify-content: center; */
-			font-family: AlimamaShuHeiTi, AlimamaShuHeiTi-Bold;
-			font-weight: 700;
-			color: #333333;
-			padding: 0 34rpx 0 54rpx;
+    .btn {
+      border-radius: 60rpx;
+      width: 401rpx;
+      height: 97rpx;
+      /* background: linear-gradient(189deg, #a7f4ff 0%, #45e3ff 100%), #edf4fc; */
+      background: linear-gradient(189deg, #bbfdbd 0%, #a4f0a4 100%), #edf4fc;
+      border-radius: 20rpx;
+      margin-top: 49rpx;
+      display: flex;
+      align-items: center;
+      /* justify-content: center; */
+      font-family: AlimamaShuHeiTi, AlimamaShuHeiTi-Bold;
+      font-weight: 700;
+      color: #333333;
+      padding: 0 34rpx 0 54rpx;
+
+      image {
+        flex-shrink: 0;
+        width: 60rpx;
+        height: 60rpx;
+        /* margin-right: 10rpx; */
+      }
 
-			image {
-				flex-shrink: 0;
-				width: 60rpx;
-				height: 60rpx;
-				/* margin-right: 10rpx; */
-			}
+      text {
+        flex: 1;
+        text-align: center;
+      }
+    }
+  }
 
-			text {
-				flex: 1;
-				text-align: center;
-			}
-		}
-	}
-	.pdr0{
-		padding-right: 0 !important;
-	}
+  .pdr0 {
+    padding-right: 0 !important;
+  }
 </style>

pages/goods.vue

@@ -145,6 +145,15 @@
       <image class="logo-img" src="/static/logo.png" mode="aspectFill"></image>
       <view class="tip">打开宜格服务APP</view>
     </view>
+    
+    <view class="wx-open">
+      <wx-open-launch-app id="launch-btn" appid="wx2cbf40f5fffa9e80" :extinfo="query" @launch="launchApp" @error="errorApp">
+        <script type="text/wxtag-template">
+          <style>.btn { padding: 50px;width: 300px;height:100px; }</style>
+          <button class="btn">App内查看</button>
+        </script>
+      </wx-open-launch-app>
+    </view>
 
     <ldLoading isFullScreen :active="loading"></ldLoading>
   </view>
@@ -182,6 +191,7 @@
         goodsInfo: {},
         timer: null,
         showHint: false,
+        query: {}
       };
     },
     props: {
@@ -197,6 +207,11 @@
     },
     created() {
       this.type = this.options.type;
+      this.query = {
+        jumpType: "goods",
+        goodsType: this.options.type,
+        goodsId: this.options.id
+      }
       if ((this.options.type == 1 || this.options.type == 5) && this.options.id) {
         this.getDefaultDetailInfo(this.options.id);
       }
@@ -223,6 +238,12 @@
     onLoad(options) {},
 
     methods: {
+      launchApp(e) {
+        console.log(e, 1111)
+      },
+      errorApp(e) {
+        console.log(e, 1111)
+      },
       openApp() {
         const ua = navigator.userAgent.toLowerCase()
         const isWeixin = ua.indexOf('micromessenger') != -1;
@@ -969,4 +990,21 @@
       margin-top: -30rpx;
     }
   }
+  
+  .wx-open {
+    position: fixed;
+    bottom: 400rpx;
+    left: 50%;
+    width: 300rpx;
+    height: 100rpx;
+    color: #fff;
+    background-color: red;
+    transform: translateX(-50%);
+    z-index: 9;
+    
+    #launch-btn {
+      width: 100%;
+      height: 100%;
+    }
+  }
 </style>