weixin-module

assets/css/mine/news.scss

 .page-news {
     padding-top: 88rpx;
     background: linear-gradient(200deg, #d6e8ff 0%, #f5f5f7 277px);
+    .search-box {
+        position: fixed;
+        right: 90rpx;
+        top: 12rpx;
+        width: 538rpx;
+        height: 66rpx;
+        background: #ffffff;
+        border-radius: 33rpx;
+        border: 2rpx solid #1969f9;
+        padding-left: 16rpx;
+        transition: all 0.4s ease;
+        .uni-input {
+            margin-left: 11rpx;
+            font-size: 24rpx;
+        }
+    }
     .icon-search {
         font-size: 44rpx;
         color: #484b59;
     }
+    .icon-xxx {
+        font-size: 44rpx;
+        color: #484b59;
+    }
     .uni-margin-wrap {
         background-color: #ffffff;
         padding: 0 24rpx;
@@ -199,6 +219,7 @@
     .ad {
         padding: 28rpx 24rpx 30rpx 24rpx;
         .box {
+            display: block;
             margin-bottom: 24rpx;
             image {
                 width: 100%;

package-lock.json

@@ -4,6 +4,11 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "jweixin-module": {
+      "version": "1.6.0",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/jweixin-module/-/jweixin-module-1.6.0.tgz",
+      "integrity": "sha512-dGk9cf+ipipHmtzYmKZs5B2toX+p4hLyllGLF6xuC8t+B05oYxd8fYoaRz0T30U2n3RUv8a4iwvjhA+OcYz52w=="
+    },
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://repo.huaweicloud.com/repository/npm/lodash/-/lodash-4.17.21.tgz",

package.json

@@ -13,6 +13,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "jweixin-module": "^1.6.0",
     "lodash": "^4.17.21",
     "query-string": "^6.14.1",
     "uni-simple-router": "^1.5.5"

pages/mine/article.vue

@@ -39,6 +39,7 @@
 <script>
 import { Api_Url } from '@/util/api.js';
 import navElement from '@/components/nav.vue';
+import wx from 'jweixin-module';
 
 export default {
     components: {
@@ -70,7 +71,77 @@ export default {
             this.$refs.share.open('bottom');
         },
         selectChange(e) {
-            console.log(e);
+            if (e.index == 0) {
+                this.wxChange();
+            } else if (e.index == 1) {
+                this.wxChange();
+            } else if (e.index == 2) {
+                uni.setClipboardData({
+                    data: window.location.href,
+                    success() {
+                        uni.showToast({
+                            title: '复制成功',
+                            icon: 'success'
+                        });
+                    }
+                });
+            } else if (e.index == 3) {
+            }
+        },
+        wxChange(type) {
+            wx.config({
+                // 必填，公众号的唯一标识
+                appId: '',
+                // 必填，生成签名的时间戳
+                timestamp: '',
+                // 必填，生成签名的随机串
+                nonceStr: '',
+                // 必填，签名
+                signature: '',
+                // 必填，需要使用的JS接口列表
+                jsApiList: [
+                    'updateAppMessageShareData', // 分享到朋友
+                    'updateTimelineShareData' // 分享到朋友圈
+                ]
+            });
+
+            wx.ready(() => {
+                // 微信JS-SDK初始化成功的逻辑
+                if (type == 0) {
+                    // 分享给朋友
+                    wx.updateAppMessageShareData({
+                        title: this.title,
+                        desc: this.detail.title,
+                        link: window.location.href,
+                        imgUrl: 'https://img.ichunt.com/images/ichunt/202305/27/629558c925582120340af8ebb2337f40.png',
+                        success: function() {
+                            // 分享成功的逻辑
+                        },
+                        fail: function() {
+                            // 分享失败的逻辑
+                        }
+                    });
+                }
+
+                if (type == 1) {
+                    // 分享到朋友圈
+                    wx.updateTimelineShareData({
+                        title: this.title,
+                        link: window.location.href,
+                        imgUrl: 'https://img.ichunt.com/images/ichunt/202305/27/629558c925582120340af8ebb2337f40.png',
+                        success: function() {
+                            // 分享成功的逻辑
+                        },
+                        fail: function() {
+                            // 分享失败的逻辑
+                        }
+                    });
+                }
+            });
+
+            wx.error(res => {
+                // 微信JS-SDK初始化失败的逻辑
+            });
         },
         toUrl(id, type, name) {
             if (type == 1) {

pages/mine/news.vue

@@ -2,7 +2,12 @@
     <view class="page-news">
         <navElement :title="title" @change="sortChange()">
             <template slot="title-bar">
-                <view style="text-align: right;"><text class="iconfont icon-search"></text></view>
+                <view class="search-box row verCenter" v-if="!searchFlag">
+                    <text class="iconfont icon-search"></text>
+                    <input type="text" placeholder="请输入搜索" class="uni-input" @input="handleInput($event)" v-model="searchParams.title" />
+                </view>
+                <view style="text-align: right;" v-if="searchFlag" @click="searchFlag = false"><text class="iconfont icon-search"></text></view>
+                <view style="text-align: right;" v-else @click="searchFlag = true"><text class="iconfont icon-xxx"></text></view>
             </template>
         </navElement>
         <view class="uni-margin-wrap">
@@ -37,12 +42,15 @@
 <script>
 import { Api_Url } from '@/util/api.js';
 import navElement from '@/components/nav.vue';
+import debounce from 'lodash/debounce';
+
 export default {
     components: {
         navElement
     },
     data() {
         return {
+            searchFlag: true,
             indicatorDots: true,
             autoplay: true,
             interval: 2000,
@@ -54,11 +62,12 @@ export default {
             hasMoreData: true, //是否分页加载
             ad: [],
             p: 1,
-            limit: 30,
+            limit: 100,
             searchParams: {
                 tag_id: '',
                 type_id: '',
-                function_tag_id: ''
+                function_tag_id: '',
+                title: ''
             }
         };
     },
@@ -83,6 +92,14 @@ export default {
         this.getData();
     },
     methods: {
+        /**
+         * 搜索
+         * @param {Object} event
+         */
+        handleInput: debounce(function(event) {
+            this.resetChange();
+            this.getData();
+        }, 500),
         toUrl(id, type, name) {
             if (type == 1) {
                 uni.navigateTo({
@@ -127,6 +144,7 @@ export default {
                         this.hasMoreData = false;
                     }
                 } else {
+                    this.list = [];
                     this.hasMoreData = false;
                 }
             });