feats

public/config.js

@@ -9,4 +9,7 @@ const shareOptTpl = {
 const link1URL = 'http://h5.njyunzhi.com/wenhua818-2/index.html';
 
 // 分享接口地址
-const API_BASE = 'http://test-h5.njyunzhi.com/api/wx/jsapi';
+const API_BASE = 'http://test-h5.njyunzhi.com';
+
+// 公众号ID
+const APPID = 'wxd3bab568bc42d1de';

src/main.js

@@ -7,7 +7,7 @@ import store from './store'
 import wxsdk from './utils/wx'
 import router from './router'
 
-const { share } = wxsdk(location.href)
+const { share, getCode } = wxsdk(location.href)
 
 const app = createApp(App);
 app.use(VueViewer);
@@ -15,4 +15,5 @@ app.use(store);
 app.use(router);
 app.mount('#app');
 
+getCode(store);
 share();

src/pages/creation/index.vue

@@ -2,13 +2,13 @@
   <div class="page" :style="pgStyle">
     <Image :src="backImg" :actions="actions" @load="onLoad" />
     <TGradient :style="gdStyle" color="#0f2c37" />
-    <input class="input-box input-line" placeholder="请输入您的祝福语!" :style="iiStyle" @input="onAuthor" />
+    <input class="input-box input-line" placeholder="请输入您的姓名!" :style="iiStyle" @input="onAuthor" ref="inputRef" />
     <textarea class="input-box input-area" placeholder="请输入您的祝福语!" :style="ttStyle" @input="onContent"></textarea>
   </div>
 </template>
 
 <script setup>
-  import { ref } from 'vue';
+  import { onMounted, ref } from 'vue';
   import { useRouter } from 'vue-router';
   import { useModel } from '@zjxpcyc/vue-tiny-store';
   import Image from '@/components/Image.vue'
@@ -33,10 +33,12 @@
   ];
 
   const router = useRouter();
+  const inputRef = ref();
   const gdStyle = ref({});
   const ttStyle = ref({});
   const iiStyle = ref({});
   const pgStyle = ref({});
+  const [user] = useModel('user');
   const [author, poemContent] = useModel('poem');
 
   const onLoad = (e) => {
@@ -79,6 +81,11 @@
     poemContent.value = e.target.value;
   }
 
+  onMounted(() => {
+    inputRef.value.value = (user.value || {}).nickname || undefined;
+    author.value = inputRef.value.value;
+  })
+
 </script>
 
 <style lang="less" scoped>

src/store/index.js

@@ -1,6 +1,16 @@
 import { ref } from 'vue';
 import createStore from '@zjxpcyc/vue-tiny-store';
 
+const useUser = () => {
+  const user = ref();
+  const setUser = u => user.value = u;
+
+  return [
+    user,
+    setUser,
+  ]
+}
+
 const usePoem = () => {
   const name = ref();
   const content = ref();
@@ -24,6 +34,6 @@ const useQRCode = () => {
   ]
 };
 
-const store = createStore({ poem: usePoem, qrcode: useQRCode });
+const store = createStore({ user: useUser, poem: usePoem, qrcode: useQRCode });
 
 export default store;

src/utils/wx.js

@@ -25,7 +25,7 @@ function wxsdk(url) {
 
   function init() {
     // 请求后台接口
-    fetch(`${apiBase}?url=${encodeURIComponent(url)}`).then(res => res.json()).then((res) => {
+    fetch(`${apiBase}/api/wx/jsapi?url=${encodeURIComponent(url)}`).then(res => res.json()).then((res) => {
       if (res.code === 1000) {
         const data = res.data;
 
@@ -44,9 +44,6 @@ function wxsdk(url) {
     })
   }
 
-  // 立即执行
-  init();
-
   function share(params = {}) {
     if (isDev) return;
 
@@ -62,8 +59,55 @@ function wxsdk(url) {
     });
   }
 
+  function getCode(store) {
+    const [,setUser] = store.getState('user');
+    if (isDev) {
+      setUser({ nickname: 123 });
+      return ;
+    }
+
+    const matched = /[?&]+code=([^?&]+)/.exec(location.href);
+    if (!matched) {
+      const target = encodeURIComponent(location.origin + location.pathname)
+      location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APPID}&redirect_uri=${target}&state=abc123#wechat_redirect`
+      return false;
+    }
+
+    const onError = () => {
+      //
+      const errorTimes = localStorage.getItem("error-times") || 0;
+      if (errorTimes < 3) {
+        errorTimes += 1;
+        localStorage.setItem("error-times", errorTimes);
+
+        // 重来一次
+        location.href = location.origin + location.pathname;
+        return;
+      } else {
+        // 未获取到任何信息
+        setUser({});
+      }
+    }
+
+    const code = matched[1];    
+    // 请求后台接口
+    fetch(`${apiBase}/api/wx/user?code=${code}`).then(res => res.json()).then((res) => {
+      if (res.code === 1000) {
+        setUser(res.data);
+        localStorage.setItem("error-times", "0");
+      } else {
+        onError();
+      }
+    }).catch((err) => {
+      console.error(err);
+      onError();
+    })
+  }
+
   return {
-    share
+    init,
+    share,
+    getCode,
   }
 }