{"id":3730,"date":"2022-09-11T16:58:57","date_gmt":"2022-09-11T08:58:57","guid":{"rendered":"https:\/\/blog.odjbinail.cn\/?p=3730"},"modified":"2023-02-13T17:44:45","modified_gmt":"2023-02-13T09:44:45","slug":"uni-app%e6%96%b0%e9%97%bb%e7%bd%91%e7%ab%99","status":"publish","type":"post","link":"https:\/\/blog.odjbinail.cn\/?p=3730","title":{"rendered":"uni-app\u53ca\u65b0\u95fb\u7f51\u7ad9-\u524d\u7aef"},"content":{"rendered":"<h2>uni-app \u662f\u4ec0\u4e48?<\/h2>\n<ul>\n<li>\u4f7f\u7528 Vue.js \u6280\u672f\u5f00\u53d1\u6240\u6709\u524d\u7aef\u5e94\u7528\u7684\u6846\u67b6 [\u8de8\u7aef\u6846\u67b6]<\/li>\n<li>\u7f16\u5199\u4e00\u5957\u4ee3\u7801\u7684\u540c\u65f6,\u53ef\u4ee5\u628a\u5e94\u7528\u53d1\u5e03\u5230\u591a\u4e2a\u5e73\u53f0<\/li>\n<\/ul>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082322494919.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082322494919.png\" alt=\"\" \/><\/p><\/noscript>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082514175679.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082514175679.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>pages\/index\/index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code> \/**\n   * \u9875\u9762\u7684\u521d\u59cb\u6570\u636e\n   *\/\n  data: {\n    \/\/1.\u6570\u636e\u7ed1\u5b9a &lt;text&gt;{{name}}&lt;\/text&gt;\n    name: &#039;\u5f20\u4e09&#039;,\n    \/\/2.\u6761\u4ef6\u5224\u65ad wx:if=&quot;{{is_ok}}&quot;\n    is_ok: false,\n    \/\/3.\u5217\u8868\u6e32\u67d3 &lt;view wx:for=&quot;{{ages}}&quot; wx:for-item=&quot;age&quot; wx:for-index=&quot;ids&quot;&gt;{{age}}-{{ids}}&lt;\/view&gt;\n    ages: [12, 13, 14, 15]\n  },<\/code><\/pre>\n<h2>uni-app \u6838\u5fc3\u77e5\u8bc6\u70b9\u6982\u89c8<\/h2>\n<ul>\n<li>\u9875\u9762\u6587\u4ef6\u9075\u5faa Vue \u5355\u6587\u4ef6\u7ec4\u4ef6(SFC)\u89c4\u8303<\/li>\n<\/ul>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082416273644.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082416273644.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>\u7ec4\u4ef6\u6807\u7b7e\u9760\u8fd1\u5c0f\u7a0b\u5e8f\u89c4\u8303<\/li>\n<\/ul>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082416254924.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082416254924.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>\n<p>\u63a5\u53e3\u80fd\u529b(JS API)\u9760\u8fd1\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u89c4\u8303<br \/>\n<img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082416284496.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082416284496.png\" alt=\"\" \/><\/p><\/noscript>\n<\/li>\n<li>\n<p>\u6570\u636e\u7ed1\u5b9a\u53ca\u4e8b\u4ef6\u5904\u7406\u540c Vue.js \u89c4\u8303<\/p>\n<\/li>\n<li>\n<p>\u4e3a\u517c\u5bb9\u591a\u7aef\u8fd0\u884c,\u5efa\u8bae\u4f7f\u7528 flex \u5e03\u5c40\u8fdb\u884c\u5f00\u53d1<\/p>\n<\/li>\n<li>\n<p>uni-app \u7279\u8272<\/p>\n<ul>\n<li>\u6761\u4ef6\u7f16\u8bd1<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082416305724.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082416305724.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>App \u7aef\u7684 Nvue \u5f00\u53d1<\/li>\n<li>HTML5+\n<ul>\n<li>uni-app \u77e5\u8bc6\u70b9<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082416341379.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082416341379.png\" alt=\"\" \/><\/p><\/noscript>\n<h2>\u6a21\u677f\u8bed\u6cd5 \u6570\u636e\u7ed1\u5b9a<\/h2>\n<pre class=\"prettyprint linenums\" ><code>&lt;template&gt;\n    &lt;view class=&quot;content&quot; :class=&quot;className&quot; @click=&quot;open&quot;&gt;\n        {{title}}\n    &lt;\/view&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\n    export default {\n        \/\/\u521d\u59cb\u5316\u6570\u636e\u65b9\u6cd5\n        data() {\n            return {\n                title: &#039;\u4fee\u6539\u503c&#039;,\n                className: &#039;active&#039;\n            }\n        },\n        onLoad() {\n            setTimeout(() =&gt; {\n                this.title = &#039;Hello&#039;\n            }, 2000)\n        },\n        methods: {\n            open() {\n                console.log(&#039;\u88ab\u70b9\u51fb\u4e86&#039;)\n                this.title = &#039;\u88ab\u70b9\u51fb\u4e86&#039;\n            },\n        }\n    }\n&lt;\/script&gt;<\/code><\/pre>\n<h2>\u6761\u4ef6\u5224\u65ad<\/h2>\n<pre class=\"prettyprint linenums\" ><code>&lt;template&gt;\n    &lt;view&gt;\n        &lt;view&gt;\n            &lt;view v-if=&quot;show===&#039;uni-app&#039;&quot;&gt;uni-app&lt;\/view&gt;\n            &lt;view v-else-if=&quot;show===&#039;vue&#039;&quot;&gt;vue&lt;\/view&gt;\n            &lt;view v-else&gt;html&lt;\/view&gt;\n        &lt;\/view&gt;\n        &lt;button type=&quot;default&quot; @click=&quot;open&quot;&gt;\u70b9\u51fb&lt;\/button&gt;\n    &lt;\/view&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\n    export default {\n        \/\/\u521d\u59cb\u5316\u6570\u636e\u65b9\u6cd5\n        data() {\n            return {\n                show: true\n            }\n        },\n        onLoad() {},\n        methods: {\n            open() {\n                this.show = &#039;vue&#039;\n            },\n        }\n    }\n&lt;\/script&gt;<\/code><\/pre>\n<h2>\u5217\u8868\u6e32\u67d3[\u901a\u8fc7\u6570\u7ec4\u6765\u6e32\u67d3\u6211\u4eec\u7684\u5217\u8868]<\/h2>\n<pre class=\"prettyprint linenums\" ><code>&lt;!-- v-for item : \u88ab\u8fed\u4ee3\u7684\u6570\u7ec4\u5143\u7d20\u7684\u522b\u540d--&gt;\n&lt;view v-for=&quot;(item,value) in arr&quot;&gt;{{value+&#039; : &#039;+item}}&lt;\/view&gt;\n\nreturn {\n        arr: {\n            name: &#039;Liming&#039;,\n            age: 18,\n            type: &#039;eat&#039;\n        }\n    }<\/code><\/pre>\n<h2>\u57fa\u7840\u7ec4\u4ef6<\/h2>\n<ul>\n<li><a href=\"https:\/\/uniapp.dcloud.net.cn\/component\/view.html\">https:\/\/uniapp.dcloud.net.cn\/component\/view.html<\/a><\/li>\n<li>view =&gt; div<\/li>\n<li>text =&gt; span<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&lt;scroll-view class=&quot;height&quot; scroll-y=&quot;true&quot; @scroll=&quot;scroll&quot;&gt;\n        &lt;view v-for=&quot;item in 100&quot;&gt;{{item}}&lt;\/view&gt;\n&lt;\/scroll-view&gt;\n\nmethods: {\n    scroll(e) {\n        \/\/\u6839\u636e\u6eda\u52a8\u8f93\u51fa\u7684\u4e8b\u4ef6,\u53ef\u4ee5\u7ed9\u5176\u8bbe\u7f6e\u56fa\u5b9a\u7684\u6837\u5f0f\n        console.log(e)\n    }\n}<\/code><\/pre>\n<h2>\u81ea\u5b9a\u4e49\u7ec4\u4ef6 [\u91cd\u8981,\u91cd\u4e2d\u4e4b\u91cd]<\/h2>\n<ul>\n<li>btn \u7ec4\u4ef6<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&lt;template&gt;\n    &lt;view class=&quot;btn-box&quot; :style=&quot;{color:color}&quot; @click=&quot;onClick&quot;&gt;\n        &lt;!-- \u5728\u7ec4\u4ef6\u4e2d,\u63a5\u6536\u9875\u9762\u4e2d\u5199\u5230\u7ec4\u4ef6\u7684\u5185\u5bb9 --&gt;\n        &lt;slot&gt;&lt;\/slot&gt;\n    &lt;\/view&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\n    export default {\n        props: {\n            color: {\n                type: String,\n                default: &#039;#000&#039;\n            }\n        },\n        data() {\n            return {\n\n            }\n        },\n        methods: {\n            onClick() {\n                console.log(&#039;\u6211\u88ab\u70b9\u51fb\u4e86&#039;);\n                this.$emit(&#039;change&#039;, this.color)\n            }\n        }\n    }\n&lt;\/script&gt;\n\n&lt;style&gt;\n    .btn-box {\n        width: 200px;\n        height: 100px;\n        text-align: center;\n        line-height: 100px;\n        border: 1px red solid;\n    }\n&lt;\/style&gt;<\/code><\/pre>\n<ul>\n<li>index.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&lt;template&gt;\n    &lt;view&gt;\n        &lt;btn color=&quot;blue&quot; @change=&quot;change&quot;&gt;\u6211\u662f\u4e00\u4e2a\u6309\u94ae&lt;\/btn&gt;\n    &lt;\/view&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\n    import btn from &#039;@\/components\/btn\/btn.vue&#039;\n    export default {\n        components: {\n            btn\n        },\n        data() {\n            return {\n            }\n        },\n        methods: {\n            change(e) {\n                console.log(&#039;\u6211\u662f\u9875\u9762\u7684\u4e8b\u4ef6,\u6211\u8fd4\u56de\u4e86:&#039; + e);\n            }\n        }\n    }\n&lt;\/script&gt;<\/code><\/pre>\n<h2>api,\u6761\u4ef6\u7f16\u8bd1\u4e0e\u9875\u9762\u5e03\u5c40<\/h2>\n<pre class=\"prettyprint linenums\" ><code>&lt;template&gt;\n    &lt;view&gt;\n        &lt;!-- \u5bf9\u5e94\u5e73\u53f0\u7684\u4ee3\u7801 \u7f16\u8bd1\u5230\u5bf9\u5e94\u7684\u5e73\u53f0 MP-WEIXIN \u5fae\u4fe1\u5c0f\u7a0b\u5e8f--&gt;\n        &lt;!-- (#)ifndef \u9664\u4e86 H5,\u5176\u4ed6\u5e73\u53f0\u90fd\u5b58\u5728\u5176\u4ee3\u7801--&gt;\n        &lt;!--#ifdef H5||APP-PLUS--&gt;\n        &lt;btn color=&quot;blue&quot; @change=&quot;change&quot;&gt;\u6211\u662f\u4e00\u4e2a\u6309\u94ae&lt;\/btn&gt;\n        &lt;!-- #endif --&gt;\n        &lt;!-- \u9875\u9762\u5e03\u5c40 --&gt;\n        &lt;view class=&quot;content color&quot;&gt;uni-app&lt;\/view&gt;\n    &lt;\/view&gt;\n\n&lt;\/template&gt;\n\n&lt;script&gt;\n    import btn from &#039;@\/components\/btn\/btn.vue&#039;\n    export default {\n        components: {\n            btn\n        },\n        data() {\n            return {}\n        },\n        onLoad() {\n            \/\/ #ifdef H5\n\n            \/\/ #endif\n            uni.getSystemInfo({\n                success(res) {\n                    console.log(&#039;success&#039;, res)\n                },\n                fail(err) {\n                    console.log(&#039;fail&#039;, err);\n                },\n                complete(res) {\n                    console.log(&#039;\u4e0d\u7ba1\u6210\u529f\u5931\u8d25\u90fd\u4f1a\u8fd4\u56de&#039;, res);\n                }\n            })\n        },\n        methods: {\n            change(e) {\n                console.log(&#039;\u6211\u662f\u9875\u9762\u7684\u4e8b\u4ef6,\u6211\u8fd4\u56de\u4e86:&#039; + e);\n            }\n        }\n    }\n&lt;\/script&gt;\n&lt;style&gt;\n    @import &#039;.\/index.css&#039;;\n\n    \/* #ifdef H5*\/\n    \/* #endif*\/\n    \/* body *\/\n    page {\n        background-color: #007aff;\n    }\n\n    \/* \u5c3a\u5bf8\u5355\u4f4d *\/\n    .content {\n        font-size: 12px;\n    }\n&lt;\/style&gt;<\/code><\/pre>\n<h2>\u751f\u547d\u5468\u671f<\/h2>\n<ul>\n<li>\u5e94\u7528\u751f\u547d\u5468\u671f<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>    \/\/\u5e94\u7528\u751f\u547d\u5468\u671f\u53ea\u80fd\u5728 App.vue \u91cc\n    export default {\n        \/\/ \u5e94\u7528 \u521d\u59cb\u5316\u5b8c\u6210\u89e6\u53d1\u4e00\u6b21,\u5168\u5c40\u53ea\u89e6\u53d1\u4e00\u6b21\n        onLaunch: function() {\n            \/\/\u767b\u5f55 \u83b7\u53d6\u5168\u5c40\u53d8\u91cf\n            console.log(&#039;App Launch&#039;)\n        },\n        \/\/\u5e94\u7528\u542f\u52a8\u7684\u65f6\u5019,\u6216\u8005\u4ece\u540e\u53f0\u8fdb\u5165\u524d\u53f0\u4f1a\u89e6\u53d1\n        onShow: function() {\n            console.log(&#039;App Show&#039;)\n        },\n        \/\/\u5e94\u7528\u4ece\u524d\u53f0\u8fdb\u5165\u540e\u53f0\u89e6\u53d1\n        onHide: function() {\n            console.log(&#039;App Hide&#039;)\n        }\n    }<\/code><\/pre>\n<ul>\n<li>\u9875\u9762\u751f\u547d\u5468\u671f<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>    \/\/\u76d1\u542c\u9875\u9762\u52a0\u8f7d[\u5173\u6ce8]\n    onLoad() {\n    },\n    \/\/\u76d1\u542c\u9875\u9762\u7684\u521d\u6b21\u6e32\u67d3\u5b8c\u6210[\u5173\u6ce8]\n    onReady() {\n    \/\/\u5982\u679c\u6e32\u67d3\u901f\u5ea6\u5feb,\u4f1a\u5728\u9875\u9762\u8fdb\u5165\u52a8\u753b\u5b8c\u6210\u524d\u89e6\u53d1\n    },\n\n    \/\/\u76d1\u542c\u9875\u9762\u663e\u793a\n    onShow() {\n    },\n    \/\/\u76d1\u542c\u9875\u9762\u9690\u85cf\n    onHide() {\n    },\n    \/\/\u76d1\u542c\u9875\u9762\u5378\u8f7d\n    onUnload() {\n    },\n    methods: {\n    open() {\n        \/\/ redirectTo \u5173\u95ed index \u9875\u9762\n        uni.redirectTo({\n        url: &#039;..\/test-a\/test-a&#039;\n    })\n    }\n    }<\/code><\/pre>\n<ul>\n<li>\u7ec4\u4ef6\u751f\u547d\u5468\u671f<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>    \/\/\u5728\u5b9e\u4f8b\u521d\u59cb\u5316\u4e4b\u540e\uff0c\u6570\u636e\u89c2\u6d4b (data observer) \u548c event\/watcher \u4e8b\u4ef6\u914d\u7f6e\u4e4b\u524d\u88ab\u8c03\u7528\u3002\n    beforeCreate() {\n    console.log(&#039;component beforeCreate&#039;);\n    },\n    \/\/\u5b9e\u4f8b\u521b\u5efa\u5b8c\u6210\u4e4b\u540e\u7acb\u5373\u8c03\u7528,\u6302\u8f7d\u9636\u6bb5\u8fd8\u6ca1\u5f00\u59cb\n    created() {\n    console.log(&#039;component created&#039;);\n    },\n    \/\/\u6302\u8f7d\u5230\u5b9e\u4f8b\u4e0a\u53bb\u4e4b\u540e\u8c03\u7528\n    mounted() {\n    console.log(&#039;component mounted&#039;);\n    },\n    \/\/vue \u5b9e\u4f8b\u9500\u6bc1\u540e\u8c03\u7528\n    destroyed() {\n    console.log(&#039;component destroyed&#039;);\n    }<\/code><\/pre>\n<h2>uni-app \u9879\u76ee\u914d\u7f6e<\/h2>\n<ul>\n<li>\u5fae\u4fe1\u5c0f\u7a0b\u5e8f [\u8bbe\u7f6e-&gt;\u5b89\u5168\u8bbe\u7f6e-&gt;\u670d\u52a1\u7aef\u53e3] HBuilderX[\u5de5\u5177-&gt;\u8bbe\u7f6e-&gt;\u8fd0\u884c\u914d\u7f6e-&gt;\u914d\u7f6e\u8def\u5f84]<\/li>\n<li>app \u771f\u673a\/\u6a21\u62df\u5668 [\u6570\u636e\u7ebf\u8fde\u63a5]<\/li>\n<li>h5<\/li>\n<\/ul>\n<h3>\u76ee\u5f55\u7ed3\u6784\u6982\u8ff0<\/h3>\n<ul>\n<li>components - \u81ea\u5b9a\u4e49\u7ec4\u4ef6\u7684\u76ee\u5f55<\/li>\n<li>pages - \u9875\u9762\u5b58\u653e\u76ee\u5f55<\/li>\n<li>static - \u9759\u6001\u6587\u4ef6\u8d44\u6e90\u76ee\u5f55<\/li>\n<li>unpackage - \u7f16\u8bd1\u540e\u7684\u6587\u4ef6\u5b58\u653e\u76ee\u5f55<\/li>\n<li>utils - \u516c\u7528\u7684\u5de5\u5177\u7c7b<\/li>\n<li>common - \u516c\u7528\u7684\u6587\u4ef6<\/li>\n<li>app.vue app.js<\/li>\n<li>main.js - \u5e94\u7528\u5165\u53e3<\/li>\n<li>manifest.json - \u9879\u76ee\u914d\u7f6e<\/li>\n<li>pages.json - \u9875\u9762\u914d\u7f6e<\/li>\n<\/ul>\n<h2>\u914d\u7f6e\u9879\u76ee\u5e95\u90e8\u9009\u9879\u5361<\/h2>\n<ul>\n<li>\u5728 onTabItemTap[\u751f\u547d\u5468\u671f]\u505a\u4e9b\u6570\u636e\u91cd\u65b0\u6e32\u67d3\u7684\u4e00\u4e9b\u64cd\u4f5c(\u7c7b\u4f3c\u9875\u9762\u91cd\u65b0\u5237\u65b0) onShow(){}\u6bcf\u6b21\u9875\u9762\u8fdb\u5165\u90fd\u4f1a\u89e6\u53d1<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>    \/\/tabbar \u70b9\u51fb\u89e6\u53d1\n    onTabItemTap(e) {\n    console.log(e);\n    },<\/code><\/pre>\n<ul>\n<li>pages.json<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&quot;tabBar&quot;: {\n        &quot;color&quot;: &quot;#666&quot;,\n        &quot;selectedColor&quot;: &quot;#ff5a5f&quot;,\n        &quot;borderStyle&quot;: &quot;black&quot;,\n        &quot;list&quot;: [{\n                &quot;pagePath&quot;: &quot;pages\/index\/index&quot;,\n                &quot;text&quot;: &quot;\u9996\u9875&quot;,\n                \/\/\u672c\u5730\u56fe\u7247, \u5927\u5c0f 40kb,\u5c3a\u5bf8 \u5efa\u8bae 81*81px\n                &quot;iconPath&quot;: &quot;static\/home.png&quot;,\n                &quot;selectedIconPath&quot;: &quot;static\/home-active.png&quot;\n            },\n            {\n                &quot;pagePath&quot;: &quot;pages\/about\/about&quot;,\n                &quot;text&quot;: &quot;\u5173\u4e8e&quot;,\n                &quot;iconPath&quot;: &quot;static\/follow.png&quot;,\n                &quot;selectedIconPath&quot;: &quot;static\/follow-active.png&quot;\n            },\n            {\n                &quot;pagePath&quot;: &quot;pages\/my\/my&quot;,\n                &quot;text&quot;: &quot;\u6211\u7684&quot;,\n                &quot;iconPath&quot;: &quot;static\/my.png&quot;,\n                &quot;selectedIconPath&quot;: &quot;static\/my-active.png&quot;\n            }\n        ]\n    }<\/code><\/pre>\n<h2>\u5728 uni-app \u4e2d\u5982\u4f55\u4f7f\u7528 sass<\/h2>\n<ul>\n<li>\u5d4c\u5957\u6837\u5f0f<\/li>\n<li>\u4f7f\u7528\u53d8\u91cf, \u7528\u4e8e\u540c\u6837\u7684\u6570\u503c $width:200rpx<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&lt;style lang=&quot;scss&quot;&gt;&lt;\/style&gt;\n.content{\n\/\/&amp; \u7236\u7ea7 .content.box\n&amp;.box{}\n.logo{\nwidth:$width;\n}\n.text-area{}\n}<\/code><\/pre>\n<h2>\u8ba4\u8bc6 uniCloud \u5f00\u53d1<\/h2>\n<ul>\n<li>\n<p>\u7528 JavaScript \u5f00\u53d1\u524d\u540e\u53f0\u6574\u4f53\u4e1a\u52a1<\/p>\n<\/li>\n<li>\n<p>\u5f00\u53d1\u6210\u672c\u5927\u5e45\u4e0b\u964d<\/p>\n<\/li>\n<li>\n<p>\u53ea\u9700\u4e13\u6ce8\u4e8e\u4f60\u7684\u4e1a\u52a1<\/p>\n<\/li>\n<li>\n<p>\u975e H5,\u514d\u57df\u540d\u4f7f\u7528\u670d\u52a1\u5668<\/p>\n<\/li>\n<li>\n<p>\u5bf9\u4e8e\u654f\u6377\u6027\u4e1a\u52a1,\u5b8c\u6574\u4e0d\u9700\u8981\u524d\u540e\u53f0\u5206\u79bb<\/p>\n<\/li>\n<li>\n<p>\u5f00\u53d1\u6d41\u7a0b<br \/>\n<img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082522554995.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082522554995.png\" alt=\"\" \/><\/p><\/noscript>\n<\/li>\n<li>\n<p>\u6784\u6210<\/p>\n<ul>\n<li>\n<p>\u4e91\u51fd\u6570<br \/>\n<img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082522570279.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082522570279.png\" alt=\"\" \/><\/p><\/noscript>\n<\/li>\n<li>\n<p>\u4e91\u6570\u636e\u5e93<br \/>\n<img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082522575189.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082522575189.png\" alt=\"\" \/><\/p><\/noscript>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u4e91\u5b58\u50a8\u548c CDN<\/p>\n<\/li>\n<\/ul>\n<h2>HBuilderX \u4e2d\u914d\u7f6e uniCloud \u73af\u5883<\/h2>\n<ul>\n<li>\u6587\u4ef6-&gt;\u65b0\u5efa-&gt;\u9879\u76ee-&gt;\u542f\u7528 uniCloud-&gt;\u521b\u5efa<\/li>\n<li>uniCloud \u53f3\u952e \u4e91\u670d\u52a1\u7a7a\u95f4\u521d\u59cb\u5316\u5411\u5bfc \u5982\u679c\u672a\u5b9e\u540d\u8ba4\u8bc1,\u5219\u5148\u53bb\u5b9e\u540d\u8ba4\u8bc1,\u62cd\u597d\u8eab\u4efd\u8bc1\u6b63\u53cd\u9762\u7167\u7247,- &gt; \u70b9\u51fb\u65b0\u5efa-&gt;\u521b\u5efa\u670d\u52a1\u7a7a\u95f4- &gt;\u5173\u8054\u4e91\u670d\u52a1\u7a7a\u95f4<\/li>\n<li>\u5728 cloudfunctions \u53f3\u952e\u65b0\u5efa\u4e91\u51fd\u6570,\u65b0\u4e91\u51fd\u6570\u53f3\u952e\u4e0a\u4f20\u90e8\u7f72<\/li>\n<\/ul>\n<h2>\u4f7f\u7528 uniCloud web \u63a7\u5236\u53f0<\/h2>\n<ul>\n<li>\u4e91\u6570\u636e\u5e93:\n<ul>\n<li>\u53f3\u952e uniCloud - &gt;\u6253\u5f00 uniCloud web \u63a7\u5236\u53f0<\/li>\n<li>\u4e00\u822c\u60c5\u51b5,\u6240\u6709\u7684\u6570\u636e\u589e\u5220\u6539\u67e5,\u662f\u901a\u8fc7\u5ba2\u6237\u7aef,\u4e91\u51fd\u6570\u91cc\u9762\u64cd\u4f5c<\/li>\n<\/ul>\n<\/li>\n<li>\u4e91\u5b58\u50a8:<br \/>\n\u4e0a\u4f20\u56fe\u7247\u89c6\u9891\u7b49<\/li>\n<li>\u8de8\u57df\u914d\u7f6e<br \/>\n\u5982\u679c\u8981\u7528\u57df\u540d\u8bbf\u95ee\u4e0d\u62a5\u9519,\u5219\u5728\u63a7\u5236\u53f0\u8de8\u57df\u914d\u7f6e\u65b0\u589e\u57df\u540d 192.168.101.7:8080<br \/>\n<img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082613494152.png\"  alt=\"\" \/><\/li>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082613494152.png\" alt=\"\" \/><\/li><\/noscript>\n<\/ul>\n<h2>\u4f7f\u7528\u4e91\u51fd\u6570<\/h2>\n<ul>\n<li>\n<p>\u4fee\u6539\u4e91\u51fd\u6570,\u8981\u4e0a\u4f20\u90e8\u7f72,\u4e91\u51fd\u6570\u5728\u4e91\u7aef\u8fd0\u884c<\/p>\n<\/li>\n<li>\n<p>pages\/index\/index.js<\/p>\n<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>    open() {\n        uniCloud.callFunction({\n        name: &quot;get_list&quot;,\n        data: {\n            name: &#039;LiMing&#039;,\n            age: 18\n        },\n        success(res) {\n            console.log(res);\n        }\n        })\n    }<\/code><\/pre>\n<ul>\n<li>get_list\/index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&#039;use strict&#039;;\n\/\/\u8fd0\u884c\u5728\u4e91\u7aef(\u670d\u52a1\u5668\u7aef)\u7684\u51fd\u6570\nexports.main = async (event, context) =&gt; {\n    \/\/event \u4e3a\u5ba2\u6237\u7aef\u4e0a\u4f20\u7684\u53c2\u6570\n    \/\/context \u5305\u542b\u4e86\u8c03\u7528\u4fe1\u606f\u548c\u8fd0\u884c\u72b6\u6001, \u83b7\u53d6\u6bcf\u6b21\u8c03\u7528\u7684\u4e0a\u4e0b\u6587\n    console.log(&#039;event : &#039;, event)\n    \/\/\u8fd4\u56de\u6570\u636e\u7ed9\u5ba2\u6237\u7aef\n    return {\n        code: 200,\n        msg: event.name + &#039;\u7684\u5e74\u9f84\u662f:&#039; + event.age,\n        context\n    }\n};<\/code><\/pre>\n<h2>\u4e91\u6570\u636e\u5e93\u7684\u6dfb\u52a0\u548c\u5220\u9664<\/h2>\n<ul>\n<li>\u53f3\u952e\u4e0a\u4f20\u5e76\u8fd0\u884c<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&#039;use strict&#039;;\nconst db = uniCloud.database()\nexports.main = async (event, context) =&gt; {\n    const collection = db.collection(&#039;user&#039;)\n    \/\/\u5220\u9664\n    const res = await collection.doc(&#039;63086cfe612f700001772e6f&#039;).remove()\n    \/\/await \u540c\u6b65\u63a5\u53e3\n    \/*\u6dfb\u52a0\u8bb0\u5f55\n    let res = await collection.add([{\n            name: &#039;vue&#039;\n        },\n        {\n            name: &#039;html&#039;,\n            type: &#039;\u524d\u7aef&#039;\n        }\n    ])\n    console.log(&#039;\u6570\u636e\u63d2\u5165:&#039;);*\/\n    console.log(JSON.stringify(res));\n    return {}\n};<\/code><\/pre>\n<h2>\u6570\u636e\u5e93\u7684\u66f4\u65b0\u548c\u67e5\u627e<\/h2>\n<pre class=\"prettyprint linenums\" ><code>\/\/\u66f4\u65b0 update:\u53ea\u80fd\u66f4\u65b0\u5b58\u5728\u7684\u8bb0\u5f55 set : \u5982\u679c\u8bb0\u5f55\u5b58\u5728\u5c31\u66f4\u65b0,\u5426\u5219\u6dfb\u52a0\n    const res = await collection.doc(&#039;63086cfe612f700001772e6e&#039;).set({\n        name: &#039;vue-test&#039;,\n        type: &#039;\u524d\u7aef&#039;\n    })<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>\/\/\u67e5\u8be2\u6240\u6709\u5b57\u6bb5 const res = await collection.doc(&#039;63086cfe612f700001772e6e&#039;).get()\n    \/\/\u6a21\u7cca\u67e5\u8be2\n    const res = await collection.where({\n        name: event.name\n    }).get()\n\n    console.log(JSON.stringify(res));\n    return {\n        data: res.data,\n        code: 200,\n        msg: &#039;\u67e5\u8be2\u6210\u529f&#039;\n    }<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>open() {\n    uniCloud.callFunction({\n    name: &quot;get_list&quot;,\n    data: {\n        name: &#039;html&#039;\n    },\n    success(res) {\n        console.log(res);\n    }\n    })\n}<\/code><\/pre>\n<h2>\u4f7f\u7528\u4e91\u5b58\u50a8\u4e0a\u4f20\u6587\u4ef6\u53ca\u5220\u9664\u6587\u4ef6<\/h2>\n<pre class=\"prettyprint linenums\" ><code>open() {\n    let self = this\n    \/\/\u5220\u9664\u6587\u4ef6 \u5ba2\u6237\u7aef\u5220\u9664\u7167\u7247\u53ef\u80fd\u4f1a\u62a5\u9519 delete_file_no_permission \u63d0\u793a\u6ca1\u6709\u6743\u9650\n    \/*uniCloud.deleteFile({\n        fileList: [\n            &#039;https:\/\/vkceyugu.cdn.bspapp.com\/VKCEYUGU-5eb293ea-1514-429e-8b99-4226c1a28518\/4594017d-a5b2-4651-9ccd-fc66b5d53f1d.png&#039;\n        ],\n        success(res) {\n            console.log(res);\n        },\n        fail(err) {\n            console.log(err);\n        }\n    })*\/\n    \/\/\u4e0a\u4f20\u6587\u4ef6\n    uni.chooseImage({\n        count: 1,\n        success(res) {\n            const tempFilePath = res.tempFilePaths[0]\n            const cloudPath = res.tempFiles[0].name\n            console.log(cloudPath);\n            \/\/cloudPath \u4e0d\u53ef\u4e3a\u7a7a,\u5fc5\u987b\u4f20\n            uniCloud.uploadFile({\n                filePath: tempFilePath,\n                cloudPath: cloudPath,\n                success(res) {\n                    console.log(res);\n                    self.src = res.fileID\n                },\n                fail(err) {\n                    console.log(err);\n                }\n            })\n        },\n        fail(err) {\n            console.log(err);\n        }\n    })\n}<\/code><\/pre>\n<h1>\u9879\u76ee\u521d\u59cb\u5316<\/h1>\n<ul>\n<li>\u65b0\u5efa\u9879\u76ee-&gt;uniCloud-&gt;database-&gt;\u53f3\u952e\u65b0\u5efa db_init.json<\/li>\n<li>\u53f3\u952e\u521d\u59cb\u5316\u4e91\u6570\u636e\u5e93<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>{\n    &quot;list&quot;: { \/\/ \u96c6\u5408\uff08\u8868\u540d\uff09\n        &quot;data&quot;: [ \/\/ \u6570\u636e\n            {\n                &quot;name&quot;: &quot;tom&quot;\n            },\n            {\n                &quot;name&quot;: &quot;LiMing&quot;\n            }\/\/\u4e0d\u8981\u6709\u9017\u53f7,\u5426\u5219\u4f1a\u62a5\u9519\u8be5\u6587\u4ef6\u4e0d\u662f\u4e00\u4e2a\u6709\u6548\u7684\u6570\u636e\u5e93\u521d\u59cb\u5316\u6587\u4ef6\n        ]\n    }\n}<\/code><\/pre>\n<ul>\n<li>pages.json<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&quot;tabBar&quot;: {\n    &quot;color&quot;: &quot;#666&quot;,\n    &quot;selectedColor&quot;: &quot;#ff5a5f&quot;,\n    &quot;borderStyle&quot;: &quot;black&quot;,\n    &quot;list&quot;: [{\n    &quot;pagePath&quot;: &quot;pages\/tabbar\/index\/index&quot;,\n    &quot;text&quot;: &quot;\u9996\u9875&quot;,\n    &quot;iconPath&quot;: &quot;static\/home.png&quot;,\n    &quot;selectedIconPath&quot;: &quot;static\/home-active.png&quot;\n    }]\n}<\/code><\/pre>\n<h2>\u81ea\u5b9a\u4e49\u5bfc\u822a\u680f<\/h2>\n<pre class=\"prettyprint linenums\" ><code>\/\/\u5bfc\u822a\u680f\u53d6\u6d88\n    &quot;navigationStyle&quot;: &quot;custom&quot;,\n    &quot;navigationBarTitleText&quot;: &quot;\u9996\u9875&quot;,<\/code><\/pre>\n<ul>\n<li>easyCom components\/\u7ec4\u4ef6\u540d\/\u7ec4\u4ef6\u540d.vue \u5c40\u90e8\u5f15\u5165<\/li>\n<li>\u4e0b\u9762\u7684\u4ee3\u7801\u5c31\u4e0d\u7528\u5199<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>    import navbar from &#039;@\/components\/navbar\/navbar.vue&#039;\n    components: {\n            navbar\n    },<\/code><\/pre>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082616530893.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082616530893.png\" alt=\"\" \/><\/p><\/noscript>\n<pre class=\"prettyprint linenums\" ><code>&lt;template&gt;\n    &lt;view class=&quot;navbar&quot;&gt;\n        &lt;view class=&quot;navbar-fixed&quot;&gt;\n            &lt;view class=&quot;navbar-search&quot;&gt;\n                &lt;view class=&quot;navbar-search_icon&quot;&gt;&lt;\/view&gt;\n                &lt;view class=&quot;navbar-search_text&quot;&gt;uni-app\/vue&lt;\/view&gt;\n            &lt;\/view&gt;\n        &lt;\/view&gt;\n        &lt;view style=&quot;height: 45px;&quot;&gt;&lt;\/view&gt;\n    &lt;\/view&gt;\n&lt;\/template&gt;\n\n&lt;style lang=&quot;scss&quot;&gt;\n    .navbar {\n        .navbar-fixed {\n            position: fixed;\n            top: 0;\n            left: 0;\n            z-index: 99;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            padding: 0 15px;\n            width: 100%;\n            height: 45px;\n            background-color: $mk-base-color;\n            box-sizing: border-box;\n\n            .navbar-search {\n                display: flex;\n                align-items: center;\n                padding: 0 10px;\n                width: 100%;\n                height: 30px;\n                background-color: #fff;\n                border-radius: 30px;\n\n                .navbar-search_icon {\n                    width: 10px;\n                    height: 10px;\n                    border: 1px red solid;\n                    margin-right: 10px;\n                }\n\n                .navbar-search_text {\n                    font-size: 12px;\n                    color: #999;\n                }\n            }\n        }\n    }\n&lt;\/style&gt;<\/code><\/pre>\n<h2>\u5bfc\u822a\u680f\u9002\u914d\u5c0f\u7a0b\u5e8f<\/h2>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082617245919.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/08\/2022082617245919.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>navbar.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&lt;template&gt;\n    &lt;view class=&quot;navbar&quot;&gt;\n        &lt;view class=&quot;navbar-fixed&quot;&gt;\n            &lt;!-- \u72b6\u6001\u680f --&gt;\n            &lt;view :style=&quot;{height: statusBarHeight+&#039;px&#039;}&quot;&gt;&lt;\/view&gt;\n            &lt;!-- \u5bfc\u822a\u680f\u5185\u5bb9 --&gt;\n            &lt;view class=&quot;navbar-content&quot; :style=&quot;{height:navBarHeight+&#039;px&#039;,width:windowWidth+&#039;px&#039;}&quot;&gt;\n                &lt;view class=&quot;navbar-search&quot;&gt;\n                    &lt;view class=&quot;navbar-search_icon&quot;&gt;\n&lt;uni-icons type=&quot;search&quot;&gt;&lt;\/uni-icons&gt;&lt;\/view&gt;\n                    &lt;view class=&quot;navbar-search_text&quot;&gt;uni-app\/vue&lt;\/view&gt;\n                &lt;\/view&gt;\n            &lt;\/view&gt;\n        &lt;\/view&gt;\n        &lt;view style=&quot;height: 45px;&quot;&gt;&lt;\/view&gt;\n    &lt;\/view&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\n    export default {\n        name: &quot;navbar&quot;,\n        data() {\n            return {\n                statusBarHeight: 20,\n                navBarHeight: 45, \/\/H5\n                windowWidth: 375\n            };\n        },\n        created() {\n            \/\/\u83b7\u53d6\u624b\u673a\u7cfb\u7edf\u4fe1\u606f\n            const info = uni.getSystemInfoSync()\n            \/\/\u8bbe\u7f6e\u72b6\u6001\u680f\u9ad8\u5ea6\n            this.statusBarHeight = info.statusBarHeight\n            this.windowWidth = info.windowWidth\n            \/\/h5 app mp-alipay\n            \/\/ #ifndef H5|| APP-PLUS||MP-ALIPAY\n            \/\/\u83b7\u53d6\u80f6\u56ca\u7684\u4f4d\u7f6e\n            const menuButtonInfo = uni.getMenuButtonBoundingClientRect()\n            console.log(menuButtonInfo);\n            \/\/(\u80f6\u56ca\u5e95\u90e8\u9ad8\u5ea6-\u72b6\u6001\u680f\u7684\u9ad8\u5ea6)+(\u80f6\u56ca\u9876\u90e8\u9ad8\u5ea6-\u72b6\u6001\u680f\u5185\u7684\u9ad8\u5ea6)=\u5bfc\u822a\u680f\u7684\u9ad8\u5ea6\n            this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info\n                .statusBarHeight)+4\n            this.windowWidth = menuButtonInfo.left\n            \/\/ #endif\n        }\n    }\n&lt;\/script&gt;<\/code><\/pre>\n<h2>\u4f7f\u7528\u5b57\u4f53\u56fe\u6807<\/h2>\n<ul>\n<li>\u5728\u63d2\u4ef6\u5e02\u573a\u5b89\u88c5 icons \u63d2\u4ef6\u56fe\u6807\u5e93<\/li>\n<\/ul>\n<h2>\u9009\u9879\u5361\u6570\u636e\u521d\u59cb\u5316<\/h2>\n<ul>\n<li>\u65b0\u5efa\u4e91\u51fd\u6570 get_label<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&#039;use strict&#039;;\n\/\/\u83b7\u53d6\u6570\u636e\u5e93\u7684\u5f15\u7528\nconst db = uniCloud.database()\nexports.main = async (event, context) =&gt; {\n    \/\/\u83b7\u53d6 label \u8868\u7684\u6570\u636e\n    let label = await db.collection(&#039;label&#039;).get()\n    \/\/\u8fd4\u56de\u6570\u636e\u7ed9\u5ba2\u6237\u7aef\n    return {\n        code: 200,\n        msg: &#039;\u6570\u636e\u8bf7\u6c42\u6210\u529f&#039;,\n        data: label.data\n    }\n};<\/code><\/pre>\n<ul>\n<li>index.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&lt;template&gt;\n    &lt;view class=&quot;content&quot;&gt;\n        &lt;navbar&gt;&lt;\/navbar&gt;\n        &lt;tab :list=&quot;tabList&quot;&gt;&lt;\/tab&gt;\n    &lt;\/view&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\n    export default {\n        data() {\n            return {\n                tabList: []\n            }\n        },\n        onLoad() {\n            this.getLabel()\n        },\n        methods: {\n            getLabel() {\n                uniCloud.callFunction({\n                    name: &#039;get_label&#039;\n                }).then((res) =&gt; {\n                    const {\n                        result\n                    } = res\n                    this.tabList = result.data\n                    console.log(this.tabList);\n                })\n            }\n        }\n    }\n&lt;\/script&gt;<\/code><\/pre>\n<ul>\n<li>tab.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&lt;template&gt;\n    &lt;view class=&quot;tab&quot;&gt;\n        &lt;scroll-view class=&quot;tab-scroll&quot; scroll-x=&quot;true&quot;&gt;\n            &lt;view class=&quot;tab-scroll_box&quot;&gt;\n                &lt;view v-for=&quot;(item,index) in list&quot; :key=&quot;index&quot; class=&quot;tab-scroll_item&quot;&gt;{{item.name}}&lt;\/view&gt;\n            &lt;\/view&gt;\n        &lt;\/scroll-view&gt;\n        &lt;view class=&quot;tab-icons&quot;&gt;\n            &lt;uni-icons type=&quot;gear&quot; size=&quot;26px&quot; color=&quot;#666&quot;&gt;&lt;\/uni-icons&gt;\n        &lt;\/view&gt;\n    &lt;\/view&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\n    export default {\n        name: &quot;tab&quot;,\n        props: {\n            list: {\n                type: Array,\n                default () {\n                    return []\n                }\n            }\n        },\n    }\n&lt;\/script&gt;\n\n&lt;style lang=&quot;scss&quot;&gt;\n    .tab {\n        display: flex;\n        border-bottom: 1px #f5f5f5 solid;\n        background-color: #fff;\n        box-sizing: border-box;\n\n        .tab-scroll {\n            flex: 1;\n            overflow: hidden;\n            box-sizing: border-box;\n\n            .tab-scroll_box {\n                display: flex;\n                align-items: center;\n                flex-wrap: nowrap;\n                height: 45px;\n                box-sizing: border-box;\n\n                .tab-scroll_item {\n                    \/\/\u4e0d\u8ba9\u5143\u7d20\u8fdb\u884c\u6324\u538b\n                    flex-shrink: 0;\n                    padding: 0 10px;\n                    color: #333;\n                    font-size: 14px;\n                }\n            }\n        }\n\n        .tab-icons {\n            position: relative;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: 45px;\n\n            \/\/ \u8bbe\u7f6e\u5de6\u8fb9\u7684\u7ad6\u7ebf\n            &amp;::after {\n                content: &#039;&#039;;\n                position: absolute;\n                top: 12px;\n                bottom: 12px;\n                left: 0;\n                width: 1px;\n                background-color: #ddd;\n            }\n        }\n    }\n&lt;\/style&gt;<\/code><\/pre>\n<h2>\u5c01\u88c5\u6570\u636e\u8bf7\u6c42<\/h2>\n<ul>\n<li>main.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import api from &#039;.\/common\/api&#039;\nVue.prototype.$api = api<\/code><\/pre>\n<ul>\n<li>common-&gt;http.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>export default function $http(options) {\n    const {\n        url,\n        data\n    } = options\n    return new Promise((resolve, reject) =&gt; {\n        uniCloud.callFunction({\n            name: url,\n            data\n        }).then((res) =&gt; {\n            if (res.result.code === 200) {\n                \/\/.then\n                resolve(res.result)\n            } else {\n                \/\/catch\n                reject(res.result)\n            }\n        }).catch((err) =&gt; {\n            reject(err)\n        })\n    })\n}<\/code><\/pre>\n<ul>\n<li>common\/api\/list.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import $http from &#039;..\/http&#039;\nexport const get_label = (data) =&gt; {\n    return $http({\n        url: &#039;get_label&#039;,\n        data\n    })\n}<\/code><\/pre>\n<ul>\n<li>common\/api\/index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>\/\/\u6279\u91cf\u5bfc\u51fa\u6587\u4ef6\nconst requireApi = require.context(\n    \/\/api \u76ee\u5f55\u7684\u76f8\u5bf9\u8def\u5f84\n    &#039;.&#039;,\n    \/\/\u662f\u5426\u67e5\u8be2\u5b50\u76ee\u5f55\n    false,\n    \/\/\u67e5\u8be2\u6587\u4ef6\u7684\u4e00\u4e2a\u540e\u7f00\n    \/.js$\/\n)\nlet module = {}\nrequireApi.keys().forEach((key, index) =&gt; {\n    if (key === &#039;.\/index.js&#039;) return\n    Object.assign(module, requireApi(key))\n})\nexport default module<\/code><\/pre>\n<ul>\n<li>index.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>getLabel() {\n        this.$api.get_label({\n        name: &#039;get_label&#039;\n    }).then((res) =&gt; {\n        const {\n        data\n        } = res\n        this.tabList = data\n        })\n    }<\/code><\/pre>\n<h2>\u9009\u9879\u5361\u5207\u6362\u9009\u4e2d\u9ad8\u4eae<\/h2>\n<ul>\n<li>tab.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code class=\"language-js\">&lt;view v-for=&quot;(item,index) in list&quot; :key=&quot;index&quot; :class=&quot;{active:activeIndex===index}&quot;\n  class=&quot;tab-scroll_item&quot; @click=&quot;clickTab(item,index)&quot;&gt;{{item.name}}\n&lt;\/view&gt;\ndata() {\n    return {\n    activeIndex: 0\n    };\n},\nmethods: {\n    clickTab(item, index) {\n        this.activeIndex = index\n        this.$emit(&#039;tab&#039;, {\n            data: item,\n            index: index\n        })\n    }\n}\n\n.tab-scroll_item {\n    &amp;.active {\n        color: $mk-base-color;\n    }\n}<\/code><\/pre>\n<ul>\n<li>index.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&lt;tab :list=&quot;tabList&quot; @tab=&quot;tab&quot;&gt;&lt;\/tab&gt;\nmethods: {\n    tab({\n        data,\n        index\n    }) {\n        console.log(data,\n        index);\n    },\n}<\/code><\/pre>\n<h2>\u57fa\u7840\u5361\u7247\u89c6\u56fe\u5b9e\u73b0<\/h2>\n<ul>\n<li>\u5185\u5bb9\u6eda\u52a8\u9009\u9879\u5361\u4e0d\u52a8\u7ec4\u4ef6<\/li>\n<li>list-scroll.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&lt;template&gt;\n    &lt;view class=&quot;scroll&quot;&gt;\n        &lt;scroll-view class=&quot;list-scroll&quot; scroll-y=&quot;true&quot;&gt;\n            &lt;view&gt;\n                &lt;slot&gt;&lt;\/slot&gt;\n            &lt;\/view&gt;\n        &lt;\/scroll-view&gt;\n    &lt;\/view&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\n    export default {\n        name: &quot;list-scroll&quot;,\n        data() {\n            return {\n\n            };\n        }\n    }\n&lt;\/script&gt;\n\n&lt;style lang=&quot;scss&quot;&gt;\n    .scroll {\n        flex: 1;\n        overflow: hidden;\n        box-sizing: border-box;\n\n        .list-scroll {\n            height: 100%;\n            display: flex;\n            flex-direction: column;\n        }\n    }\n&lt;\/style&gt;<\/code><\/pre>\n<ul>\n<li>index.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&lt;list-scroll&gt;\n            &lt;list-card v-for=&quot;item in 5&quot;&gt;{{item}}&lt;\/list-card&gt;\n&lt;\/list-scroll&gt;<\/code><\/pre>\n<ul>\n<li>list-card.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&lt;template&gt;\n    &lt;view&gt;\n        &lt;view class=&quot;list-card&quot;&gt;\n            &lt;view class=&quot;listcard-image&quot;&gt;\n                &lt;image src=&quot;..\/..\/static\/logo.png&quot; mode=&quot;aspectFill&quot;&gt;&lt;\/image&gt;\n            &lt;\/view&gt;\n            &lt;view class=&quot;listcard-content&quot;&gt;\n                &lt;view class=&quot;listcard-content_title&quot;&gt;\n                    &lt;text&gt;uni-app \u5f00\u53d1\u6846\u67b6 uni-app \u5f00\u53d1\u6846\u67b6 uni-app \u5f00\u53d1\u6846\u67b6 uni-app \u5f00\u53d1\u6846\u67b6 uni-app \u5f00\u53d1\u6846\u67b6 uni-app \u5f00\u53d1\u6846\u67b6&lt;\/text&gt;\n                &lt;\/view&gt;\n                &lt;view class=&quot;listcard-content_des&quot;&gt;\n                    &lt;view class=&quot;listcard-content_des-label&quot;&gt;\n                        &lt;view class=&quot;listcard-content_des-label-item&quot;&gt;\u524d\u7aef&lt;\/view&gt;\n                    &lt;\/view&gt;\n                    &lt;view class=&quot;listcard-content_des-browse&quot;&gt;120 \u6d4f\u89c8&lt;\/view&gt;\n                &lt;\/view&gt;\n            &lt;\/view&gt;\n        &lt;\/view&gt;\n    &lt;\/view&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\n    export default {\n        name: &quot;list-card&quot;,\n        data() {\n            return {\n\n            };\n        }\n    }\n&lt;\/script&gt;\n\n&lt;style lang=&quot;scss&quot;&gt;\n    .list-card {\n        display: flex;\n        padding: 10px;\n        margin: 10px;\n        border-radius: 5px;\n        box-shadow: 0 0 5px 1px rgba($color:#000000, $alpha:0.1);\n        box-sizing: border-box;\n\n        .listcard-image {\n            width: 60px;\n            height: 60px;\n            border-radius: 5px;\n            overflow: hidden;\n\n            image {\n                width: 100%;\n                height: 100%;\n            }\n        }\n\n        .listcard-content {\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n            padding-left: 10px;\n            width: 100%;\n\n            .listcard-content_title {\n                font-size: 14px;\n                color: #333;\n                font-weight: 400;\n                line-height: 1.2;\n\n                \/\/\u6587\u5b57\u6ea2\u51fa\u9690\u85cf\n                text {\n                    overflow: hidden;\n                    text-overflow: ellipsis;\n                    display: -webkit-box;\n                    -webkit-line-clamp: 2;\n                    -webkit-box-orient: vertical;\n                }\n            }\n\n            .listcard-content_des {\n                display: flex;\n                justify-content: space-between;\n                font-size: 12px;\n\n                .listcard-content_des-label {\n                    display: flex;\n\n                    .listcard-content_des-label-item {\n                        padding: 0 5px;\n                        margin-right: 5px;\n                        border-radius: 15px;\n                        color: $mk-base-color;\n                        border: 1px $mk-base-color solid;\n                    }\n                }\n\n                .listcard-content_des-browse {\n                    color: #999;\n                    line-height: 1.5;\n                }\n            }\n        }\n    }\n&lt;\/style&gt;<\/code><\/pre>\n<h2>\u66f4\u591a\u5361\u7247\u89c6\u56fe\u5b9e\u73b0<\/h2>\n<ul>\n<li>\u4ee3\u7801\u8be6\u89c1 gitee  list-card.vue<\/li>\n<\/ul>\n<h2>\u5b9e\u73b0\u5185\u5bb9\u5207\u6362<\/h2>\n<ul>\n<li>\u4ee3\u7801\u8be6\u89c1 gitee  list.vue list-item.vue<\/li>\n<\/ul>\n<h2>\u9009\u9879\u5361\u4e0e\u5185\u5bb9\u8054\u52a8 [\u6709\u70b9\u6df7\u4e71]<\/h2>\n<h2>\u5185\u5bb9\u5361\u7247\u6570\u636e\u521d\u59cb\u5316<\/h2>\n<h2>\u5207\u6362\u9009\u9879\u5361\u61d2\u52a0\u8f7d\u6570\u636e<\/h2>\n<p>list.vue<\/p>\n<h2>\u9009\u9879\u5361\u6700\u5de6\u8fb9\u7684\u5168\u90e8\u663e\u793a<\/h2>\n<ul>\n<li>index.vue \u4e2d getLabel()\u65b9\u6cd5.then \u52a0\u5165<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>    data.unshift({\n    name: &#039;\u5168\u90e8&#039;\n    })<\/code><\/pre>\n<ul>\n<li>\u4e91\u51fd\u6570 get_list \u4e2d\u7684 index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>    const {\n        name\n    } = event\n    let matchObj = {}\n    if (name !== &#039;\u5168\u90e8&#039;) {\n        matchObj = {\n            classify: name\n        }\n    }\n\n    \/\/\u805a\u5408: \u66f4\u7cbe\u7ec6\u5316\u7684\u53bb\u5904\u7406\u6570\u636e \u6c42\u548c ,\u5206\u7ec4,\u6307\u5b9a\u90a3\u4e9b\u5b57\u6bb5\n    const list = await db.collection(&#039;article&#039;).aggregate().match(matchObj).project({\n        content: 0\n    }).end()<\/code><\/pre>\n<h2>\u52a0\u8f7d\u8fc7\u7684\u6570\u636e\u4e0d\u80fd\u518d\u8fdb\u884c\u6570\u636e\u8bf7\u6c42<\/h2>\n<ul>\n<li>list.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>change(e) {\n    const {\n        current\n    } = e.detail\n    \/\/\u81ea\u5b9a\u4e49\u4e8b\u4ef6: \u5c06\u7ec4\u4ef6\u7684\u5185\u5bb9\u53d1\u9001\u5230\u8c03\u7528\u9875\u9762\n    this.$emit(&#039;change&#039;, current)\n    \/\/\u5f53\u6570\u636e\u4e0d\u5b58\u5728\u6216\u8005\u957f\u5ea6\u662f 0 \u7684\u60c5\u51b5\u4e0b,\u624d\u53bb\u8bf7\u6c42\u6570\u636e\n    if (!this.listCatchData[current] || this.listCatchData[current].length === 0) {\n    this.getList(current)\n    }\n},<\/code><\/pre>\n<h2>\u4e0a\u62c9\u52a0\u8f7d\u66f4\u591a<\/h2>\n<h2>\u6536\u85cf\u6309\u94ae\u5b9e\u73b0<\/h2>\n<ul>\n<li>\u65b0\u5efa\u4e91\u51fd\u6570 update_like-&gt;\u53f3\u952e\u914d\u7f6e\u8fd0\u884c\u6d4b\u8bd5\u53c2\u6570-&gt;<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>{\n    &quot;user_id&quot;: &quot;63088033612f700001787a17&quot;,\n    &quot;article_id&quot;: &quot;63088032e3e39a00012e824e&quot;\n}<\/code><\/pre>\n<ul>\n<li>update_like\/index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&#039;use strict&#039;;\nconst db = uniCloud.database()\nconst dbCmd = db.command\nexports.main = async (event, context) =&gt; {\n    const {\n        user_id,\n        article_id\n    } = event\n    const userinfo = await db.collection(&#039;user&#039;).doc(user_id).get()\n    const article_id_ids = userinfo.data[0].article_likes_ids\n    let dbCmdFuns = null\n    if (article_id_ids.includes(article_id)) {\n        \/\/\u5220\u9664\n        dbCmdFuns = dbCmd.pull(article_id)\n    } else {\n        dbCmdFuns = dbCmd.addToSet(article_id)\n    }\n    await db.collection(&#039;user&#039;).doc(user_id).update({\n        article_likes_ids: dbCmdFuns\n    })\n    \/\/\u8fd4\u56de\u6570\u636e\u7ed9\u5ba2\u6237\u7aef\n    return {\n        code: 200,\n        msg: &#039;\u6570\u636e\u8bf7\u6c42\u6210\u529f&#039;,\n        data: userinfo.data[0]\n    }\n};<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>\/\/list-card.vue\n    &lt;likes :item=&quot;item&quot;&gt;&lt;\/likes&gt;<\/code><\/pre>\n<ul>\n<li>get_list\/index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>const $ = db.command.aggregate\nexports.main = async (event, context) =&gt; {\nconst {\n        user_id,\n    } = event\n}\n    const userinfo = await db.collection(&#039;user&#039;).doc(user_id).get()\n    const article_likes_ids = userinfo.data[0].article_likes_ids\n    const list = await db.collection(&#039;article&#039;)\n        .aggregate()\n        \/\/\u8ffd\u52a0\u5b57\u6bb5\n        .addFields({\n            is_like: $.in([&#039;$_id&#039;, article_likes_ids])\n        })<\/code><\/pre>\n<ul>\n<li>\u5728 http.js,\u4f7f\u6bcf\u4e2a\u63a5\u53e3\u90fd\u9ed8\u8ba4\u8bf7\u6c42\u8fd9\u4e2a user_id,\u5728\u4e4b\u540e\u90fd\u4f1a\u83b7\u53d6\u4e00\u4e0b<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>    const dataObj = {\n        user_id: &#039;63088033612f700001787a17&#039;,\n        ...data\n    }\n    uniCloud.callFunction({\n            name: url,\n            data: dataObj\n        })<\/code><\/pre>\n<ul>\n<li>likes.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&lt;template&gt;\n    &lt;view class=&quot;icons&quot; @click.stop=&quot;likeTap&quot;&gt;\n        &lt;uni-icons size=&quot;20&quot; color=&quot;#f07373&quot; :type=&quot;like?&#039;heart-filled&#039;:&#039;heart&#039;&quot;&gt;&lt;\/uni-icons&gt;\n    &lt;\/view&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\n    export default {\n        props: {\n            item: {\n                type: Object,\n                default () {\n                    return {}\n                }\n            }\n        },\n        data() {\n            return {\n                like: false\n            };\n        },\n        watch: {\n            item(newVal) {\n                this.like = this.item.is_like\n            }\n        },\n        created() {\n            this.like = this.item.is_like\n        },\n        methods: {\n            likeTap() {\n                this.like = !this.like\n                this.setupdateLikes()\n            },\n            setupdateLikes() {\n                uni.showLoading()\n                this.$api.update_like({\n                    user_id: &#039;63088033612f700001787a17&#039;,\n                    article_id: this.item._id\n                }).then(res =&gt; {\n                    uni.hideLoading()\n                    uni.showToast({\n                        title: this.like ? &#039;\u6536\u85cf\u6210\u529f&#039; : &#039;\u53d6\u6d88\u6536\u85cf&#039;,\n                        icon: &#039;none&#039;\n                    })\n                    console.log(res)\n                }).catch(() =&gt; {\n                    uni.hideLoading()\n                })\n            }\n        }\n    }\n&lt;\/script&gt;\n\n&lt;style&gt;\n    .icons {\n        position: absolute;\n        right: 0;\n        top: 0;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        width: 20px;\n        height: 20px;\n    }\n&lt;\/style&gt;<\/code><\/pre>\n<h2>\u4f7f\u7528 vuex \u7ba1\u7406\u5386\u53f2\u8bb0\u5f55<\/h2>\n<ul>\n<li>\u65b0\u5efa\u76ee\u5f55 store\/index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>\/\/vuex \u72b6\u6001\u7ba1\u7406\nimport Vue from &#039;vue&#039;\nimport Vuex from &#039;vuex&#039;\n\nVue.use(Vuex)\nconst store = new Vuex.Store({\n    \/\/\u6570\u636e\u6e90\n    state: {\n        historyLists: []\n    },\n    mutations: {\n        SET_HISTORY_LISTS(state, history) {\n            state.historyLists = history\n        }\n    },\n    actions: {\n        set_history({\n            commit,\n            state\n        }, history) {\n            let list = state.historyLists\n            list.unshift(history)\n            \/\/\u8c03\u7528 mutations \u7684\u65b9\u6cd5\n            commit(&#039;SET_HISTORY_LISTS&#039;, list)\n        }\n    }\n})\n\nexport default store<\/code><\/pre>\n<ul>\n<li>main.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import store from &#039;.\/store&#039;\nconst app = new Vue({\n    store\n})<\/code><\/pre>\n<ul>\n<li>get_search\/index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&#039;use strict&#039;;\n\/\/ \u83b7\u53d6\u6570\u636e\u5e93\u7684\u5f15\u7528\nconst db = uniCloud.database()\nconst $ = db.command.aggregate\nexports.main = async (event, context) =&gt; {\n    const {\n        value,\n        user_id,\n    } = event\n\n    const userinfo = await db.collection(&#039;user&#039;).doc(user_id).get()\n    const article_likes_ids = userinfo.data[0].article_likes_ids\n    \/\/ \u805a\u5408 \uff1a \u66f4\u7cbe\u7ec6\u5316\u7684\u53bb\u5904\u7406\u6570\u636e \u6c42\u548c \u3001\u5206\u7ec4\u3001\u6307\u5b9a\u90a3\u4e9b\u5b57\u6bb5\n\n    const list = await db.collection(&#039;article&#039;)\n        .aggregate()\n        \/\/ \u8ffd\u52a0\u5b57\u6bb5\n        .addFields({\n            is_like: $.in([&#039;$_id&#039;, article_likes_ids])\n        })\n        .project({\n            content: 0\n        })\n        .match({\n            title: new RegExp(value)\n        })\n        .end()\n\n    \/\/\u8fd4\u56de\u6570\u636e\u7ed9\u5ba2\u6237\u7aef\n    return {\n        code: 200,\n        msg: &#039;\u6570\u636e\u8bf7\u6c42\u6210\u529f&#039;,\n        data: list.data\n    }\n};<\/code><\/pre>\n<h2>\u641c\u7d22\u5386\u53f2\u6570\u636e\u6301\u4e45\u5316<\/h2>\n<ul>\n<li>\u6e05\u7a7a store\/index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code class=\"language-js\">mutations: {\n    CLEAR_HISTORY(state) {\n        state.historyLists = []\n    }\n},\nactions: {\n    clearHistory({commit}) {\n        commit(&#039;CLEAR_HISTORY&#039;)\n    }\n}<\/code><\/pre>\n<ul>\n<li>home-search.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>clear() {\n    this.$store.dispatch(&#039;clearHistory&#039;)\n    uni.showToast({\n        title: &quot;\u6e05\u7a7a\u5b8c\u6210&quot;\n    })\n},<\/code><\/pre>\n<ul>\n<li>\u5386\u53f2\u6301\u4e45\u5316 store\/index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>    \/\/\u6570\u636e\u6e90\n    state: {\n        \/\/\u540c\u6b65\n        historyLists: uni.getStorageSync(&quot;__history&quot;)||[]\n    },\n    actions: {\n        set_history({\n            commit,\n            state\n        }, history) {\n            let list = state.historyLists\n            list.unshift(history)\n            uni.setStorageSync(&#039;__history&#039;, list)\n            \/\/\u8c03\u7528 mutations \u7684\u65b9\u6cd5\n            commit(&#039;SET_HISTORY_LISTS&#039;, list)\n        },\n        clearHistory({\n            commit\n        }) {\n            uni.removeStorageSync(&#039;__history&#039;)\n            commit(&#039;CLEAR_HISTORY&#039;)\n        }\n    }<\/code><\/pre>\n<h2>\u6807\u7b7e\u7ba1\u7406\u9875\u5e03\u5c40\u6837\u5f0f<\/h2>\n<pre class=\"prettyprint linenums\" ><code>&lt;template&gt;\n    &lt;view class=&quot;label&quot;&gt;\n        &lt;view class=&quot;label-box&quot;&gt;\n            &lt;view class=&quot;label-header&quot;&gt;\n                &lt;view class=&quot;label-title&quot;&gt;\u6211\u7684\u6807\u7b7e&lt;\/view&gt;\n                &lt;view class=&quot;label-edit&quot;&gt;\u7f16\u8f91&lt;\/view&gt;\n            &lt;\/view&gt;\n            &lt;view class=&quot;label-content&quot;&gt;\n                &lt;view v-for=&quot;item in 10&quot; class=&quot;label-content_item&quot;&gt;{{item}}\u6807\u7b7e\n                    &lt;uni-icons class=&quot;icons-close&quot; type=&quot;clear&quot; size=&quot;20&quot; color=&quot;red&quot;&gt;&lt;\/uni-icons&gt;\n                &lt;\/view&gt;\n            &lt;\/view&gt;\n        &lt;\/view&gt;\n        &lt;view class=&quot;label-box&quot;&gt;\n            &lt;view class=&quot;label-header&quot;&gt;\n                &lt;view class=&quot;label-title&quot;&gt;\u6807\u7b7e\u63a8\u8350&lt;\/view&gt;\n            &lt;\/view&gt;\n            &lt;view class=&quot;label-content&quot;&gt;\n                &lt;view v-for=&quot;item in 10&quot; class=&quot;label-content_item&quot;&gt;{{item}}\u6807\u7b7e&lt;\/view&gt;\n            &lt;\/view&gt;\n        &lt;\/view&gt;\n    &lt;\/view&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\n    export default {\n        data() {\n            return {\n\n            }\n        },\n        methods: {\n\n        }\n    }\n&lt;\/script&gt;\n\n&lt;style lang=&quot;scss&quot;&gt;\n    page {\n        background-color: #f5f5f5;\n    }\n\n    .label {\n        .label-box {\n            background-color: #fff;\n            margin-bottom: 10px;\n\n            .label-header {\n                display: flex;\n                justify-content: space-between;\n                padding: 10px 15px;\n                font-size: 14px;\n                color: #666;\n                border-bottom: 1px solid #f5f5f5;\n\n                .label-edit {\n                    color: #30b33a;\n                    font-weight: bold;\n                }\n            }\n\n            .label-content {\n                display: flex;\n                flex-wrap: wrap;\n                padding: 15px;\n                padding-top: 0;\n\n                .label-content_item {\n                    position: relative;\n                    padding: 2px 5px;\n                    margin-top: 12px;\n                    margin-right: 10px;\n                    border-radius: 5px;\n                    border: 1px #666 solid;\n                    font-size: 14px;\n                    color: #666;\n\n                    .icons-close {\n                        position: absolute;\n                        right: -8px;\n                        top: -8px;\n                        background-color: #fff;\n                        border-radius: 50%;\n                    }\n                }\n            }\n        }\n    }\n&lt;\/style&gt;<\/code><\/pre>\n<h2>\u6807\u7b7e\u9875\u6570\u636e\u5904\u7406<\/h2>\n<ul>\n<li>\u4e91\u51fd\u6570: get_label\/index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&#039;use strict&#039;;\n\/\/\u83b7\u53d6\u6570\u636e\u5e93\u7684\u5f15\u7528\nconst db = uniCloud.database()\nconst $ = db.command.aggregate\nexports.main = async (event, context) =&gt; {\n    const {\n        user_id,\n        type\n    } = event\n    let matchObj = {}\n    if (type !== &#039;all&#039;) {\n        matchObj = {\n            current: true\n        }\n    }\n    let userinfo = await db.collection(&#039;user&#039;).doc(user_id).get()\n    userinfo = userinfo.data[0]\n    \/\/\u83b7\u53d6 label \u8868\u7684\u6570\u636e\n    let label = await db.collection(&#039;label&#039;).aggregate()\n        .addFields({\n            current: $.in([&#039;$_id&#039;, $.ifNull([userinfo.label_ids, []])])\n        }).match(matchObj)\n        .end()\n    \/\/\u8fd4\u56de\u6570\u636e\u7ed9\u5ba2\u6237\u7aef\n    return {\n        code: 200,\n        msg: &#039;\u6570\u636e\u8bf7\u6c42\u6210\u529f&#039;,\n        data: label.data\n    }\n};<\/code><\/pre>\n<h2>\u7f16\u8f91\u6807\u7b7e\u9875<\/h2>\n<h2>\u4fdd\u5b58\u6807\u7b7e\u9875\u6570\u636e<\/h2>\n<ul>\n<li>\u65b0\u5efa\u4e91\u51fd\u6570,update_label\/index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&#039;use strict&#039;;\nconst db = uniCloud.database()\nconst $ = db.command.aggregate\nexports.main = async (event, context) =&gt; {\n    const {\n        user_id,\n        label = []\n    } = event\n    await db.collection(&#039;user&#039;).doc(user_id).update({\n        label_ids: label\n    })\n    \/\/\u8fd4\u56de\u6570\u636e\u7ed9\u5ba2\u6237\u7aef\n    return {\n        code: 200,\n        msg: &#039;\u6570\u636e\u66f4\u65b0\u6210\u529f&#039;\n    }\n};<\/code><\/pre>\n<h2>\u4f7f\u7528\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u540c\u6b65\u6570\u636e<\/h2>\n<p>\u8be6\u89c1 gitee.com   \/pages\/home-label.vue<\/p>\n<h2>\u8be6\u60c5\u9875\u9875\u9762\u5c55\u793a<\/h2>\n<h2>\u5185\u5bb9\u9884\u52a0\u8f7d<\/h2>\n<ul>\n<li>list-card.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>open() {\n    const item = this.item\n    this.$emit(&#039;click&#039;, item)\n    const params = {\n        _id: item._id,\n        title: item.title,\n        author: item.author,\n        create_time: item.create_time,\n        thumbs_up_count: item.thumbs_up_count,\n        browse_count: item.browse_count\n    }\n    console.log(params)\n    \/\/\u4f20\u53c2\u6ce8\u610f\u957f\u5ea6\n    uni.navigateTo({\n        url: &#039;\/pages\/home-detail\/home-detail?params=&#039; + JSON.stringify(params)\n    })\n    }<\/code><\/pre>\n<ul>\n<li>home-detail.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>export default {\n    data() {\n        return {\n            formData: {}\n        }\n    },\n    onLoad(query) {\n        this.formData = JSON.parse(query.params)\n    },\n}<\/code><\/pre>\n<h2>\u8be6\u60c5\u9875\u9762\u6570\u636e\u521d\u59cb\u5316<\/h2>\n<ul>\n<li>\u65b0\u5efa\u4e91\u51fd\u6570 get_detail<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&#039;use strict&#039;;\n\/\/ \u83b7\u53d6\u6570\u636e\u5e93\u5f15\u7528\nconst db = uniCloud.database()\nconst $ = db.command.aggregate\nexports.main = async (event, context) =&gt; {\n\n    const {\n        user_id,\n        article_id\n    } = event\n\n    const userinfo = await db.collection(&#039;user&#039;).doc(user_id).get()\n    const user = userinfo.data[0]\n    const list = await db.collection(&#039;article&#039;)\n        .aggregate()\n        .addFields({\n            \/\/ \u662f\u5426\u5173\u6ce8\u4f5c\u8005\n            is_author_like: $.in([&#039;$author.id&#039;, user.author_likes_ids]),\n            \/\/ \u662f\u5426\u6536\u85cf\u6587\u7ae0\n            is_like: $.in([&#039;$_id&#039;, user.article_likes_ids]),\n            \/\/ \u662f\u5426\u70b9\u8d5e\n            is_thumbs_up: $.in([&#039;$_id&#039;, user.thumbs_up_article_ids])\n        })\n        .match({\n            _id: article_id\n        })\n        .project({\n            coments: 0\n        })\n        .end()\n\n    \/\/\u8fd4\u56de\u6570\u636e\u7ed9\u5ba2\u6237\u7aef\n    return {\n        code: 200,\n        msg: &#039;\u6570\u636e\u8bf7\u6c42\u6210\u529f&#039;,\n        data: list.data[0]\n    }\n};<\/code><\/pre>\n<ul>\n<li>home-detail.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>getDetail() {\n    this.$api.get_detail({\n        article_id: this.formData._id\n    }).then((res) =&gt; {\n        const {\n        data\n        } = res\n        this.formData = data\n    })\n}<\/code><\/pre>\n<h2>\u5bcc\u6587\u672c\u6e32\u67d3<\/h2>\n<ul>\n<li>\u5728\u63d2\u4ef6\u5e02\u573a\u641c\u7d22\u5bcc\u6587\u672c\u89e3\u6790-&gt;\u5f15\u5165 HBuilder<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&lt;u-parse :content=&quot;formData.content&quot; :noData=&quot;noData&quot;&gt;&lt;\/u-parse&gt;\n\ndata() {\n    return {\n        noData: &#039;&lt;p style=&quot;text-align:center;color:#666&quot;&gt;\u8be6\u60c5\u52a0\u8f7d\u4e2d...&lt;\/p&gt;&#039;\n    }\n},<\/code><\/pre>\n<h2>\u53d1\u5e03\u7a97\u53e3\u5c55\u793a<\/h2>\n<ul>\n<li>home-detail.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&lt;view class=&quot;popup-content&quot;&gt;\n            &lt;textarea class=&quot;popup-textarea&quot; v-model=&quot;commentsValue&quot; maxlength=&quot;200&quot; fixed\n                placeholder=&quot;\u8bf7\u8f93\u5165\u8bc4\u8bba\u5185\u5bb9&quot;&gt;&lt;\/textarea&gt;\n            &lt;view class=&quot;popup-count&quot;&gt;{{commentsValue.length}}\/200&lt;\/view&gt;\n&lt;\/view&gt;<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>        data() {\n            return {\n                formData: {},\n                noData: &#039;&lt;p style=&quot;text-align:center;color:#666&quot;&gt;\u8be6\u60c5\u52a0\u8f7d\u4e2d...&lt;\/p&gt;&#039;,\n                \/\/\u8f93\u5165\u6846\u7684\u503c\n                commentsValue: &#039;&#039;\n            }\n        },\n        onLoad(query) {\n            this.formData = JSON.parse(query.params)\n            this.getDetail()\n        },\n        methods: {\n            \/\/\u6253\u5f00\u8bc4\u8bba\u53d1\u5e03\u7a97\u53e3\n            openComment() {\n                this.$refs.popup.open()\n            },\n            \/\/\u5173\u95ed\u5f39\u7a97\n            close() {\n                this.$refs.popup.close()\n            },\n            \/\/\u53d1\u5e03\n            submit() {\n                console.log(&#039;\u53d1\u5e03&#039;);\n                this.$refs.popup.close()\n            },<\/code><\/pre>\n<h2>\u8bc4\u8bba\u5185\u5bb9\u5b9e\u73b0<\/h2>\n<ul>\n<li>\n<p>\u65b0\u5efa\u4e91\u51fd\u6570 update_comment<\/p>\n<\/li>\n<li>\n<p>\u4ece\u4e91\u6570\u636e\u5e93\u83b7\u53d6\u8bc4\u8bba\u5185\u5bb9,\u65b0\u5efa\u4e91\u51fd\u6570 get_comments<\/p>\n<\/li>\n<\/ul>\n<h2>\u56de\u590d\u8bc4\u8bba<\/h2>\n<h2>\u5b50\u56de\u590d\u7684\u56de\u590d<\/h2>\n<ul>\n<li>home-detail<\/li>\n<li>comments-box<\/li>\n<li>update_comment<\/li>\n<\/ul>\n<h2>\u5173\u6ce8\u4f5c\u8005<\/h2>\n<ul>\n<li>\u65b0\u5efa\u4e91\u51fd\u6570 update_author<\/li>\n<li>\u70b9\u51fb\u5173\u6ce8\u4e4b\u540e,\u8981\u77e5\u9053\u662f\u5426\u5df2\u7ecf\u5173\u6ce8(\u8981\u4ece\u8fd9\u770b\u4e91\u51fd\u6570 get_detail),\u4ece\u800c\u83b7\u53d6 is_author_like[\u662f\u5426\u5173\u6ce8\u4f5c\u8005]<\/li>\n<li>home-detail.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code class=\"language-js\">&lt;button class=&quot;detail-header_button&quot; type=&quot;default&quot;\n    @click=&quot;follow(formData.author.id)&quot;&gt;{{formData.is_author_like?&#039;\u53d6\u6d88\u5173\u6ce8&#039;:&#039;\u5173\u6ce8&#039;}}&lt;\/button&gt;\n\nfollow(author_id) {\n    console.log(&#039;\u5173\u6ce8&#039;);\n    this.setUpdateAuthor(author_id)\n},\n\/\/\u8bf7\u6c42\u5173\u6ce8\u4f5c\u8005\nsetUpdateAuthor(author_id) {\n    uni.showLoading()\n        this.$api.update_author({\n        author_id\n    }).then(res =&gt; {\n        uni.hideLoading()\n        this.formData.is_author_like = !this.formData.is_author_like\n        uni.showToast({\n            title: this.formData.is_author_like ? &#039;\u5173\u6ce8\u4f5c\u8005\u6210\u529f&#039; : &#039;\u53d6\u6d88\u5173\u6ce8\u4f5c\u8005&#039;,\n            icon: &#039;none&#039;\n        })\n    })\n}<\/code><\/pre>\n<h2>\u6587\u7ae0\u7684\u6536\u85cf\u4e0e\u70b9\u8d5e<\/h2>\n<ul>\n<li>\n<p>\u6536\u85cf\u7c7b\u4f3c\u5173\u6ce8<\/p>\n<\/li>\n<li>\n<p>\u70b9\u8d5e<br \/>\n\u65b0\u5efa\u4e91\u51fd\u6570 update_thumbsup<\/p>\n<\/li>\n<li>\n<p>\u8be6\u60c5\u9875\u6536\u85cf\u6587\u7ae0,\u901a\u77e5\u9996\u9875\u6536\u85cf<\/p>\n<\/li>\n<\/ul>\n<h2>\u8bc4\u8bba\u5217\u8868<\/h2>\n<ul>\n<li>\n<p>detail-comments<\/p>\n<\/li>\n<li>\n<p>\u65f6\u95f4\u6233 utils\/index.js<\/p>\n<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code class=\"language-js\">\/\/\u65f6\u95f4\u683c\u5f0f\u5316\nexport const parseTime = (time) =&gt; {\n    console.log(time);\n    const format = &#039;{y}-{m}-{d} {h}:{i}:{s}&#039;\n    let date = null\n    if (typeof time === &#039;string&#039;) {\n        time = parseInt(time)\n    }\n    date = new Date(time)\n    const formatObj = {\n        y: date.getFullYear(),\n        m: date.getMonth() + 1,\n        d: date.getDate(),\n        h: date.getHours(),\n        i: date.getMinutes(),\n        s: date.getSeconds()\n    }\n    const strTime = format.replace(\/{(y|m|d|h|i|s)+}\/g, (result, key) =&gt; {\n        let value = formatObj[key]\n        if (result.length &gt; 0 &amp;&amp; value &lt; 10) {\n            value = &#039;0&#039; + value\n        }\n        return value\n    })\n    return strTime\n}<\/code><\/pre>\n<h3>\u56de\u590d[\u4f5c\u4e1a]???<\/h3>\n<h1>\u5173\u6ce8\u9875\u5bfc\u822a\u680f\u5b9e\u73b0<\/h1>\n<ul>\n<li>follow.vue<\/li>\n<\/ul>\n<h2>\u6536\u85cf\u6587\u7ae0\u5185\u5bb9\u5b9e\u73b0<\/h2>\n<ul>\n<li>\u65b0\u5efa\u4e91\u51fd\u6570 get_follow<\/li>\n<\/ul>\n<h2>\u6536\u85cf\u4e0e\u9996\u9875\u5185\u5bb9\u5173\u8054<\/h2>\n<ul>\n<li>\n<p>follow.vue : uni.$on('update_article')<\/p>\n<\/li>\n<li>\n<p>home-detail.vue :<br \/>\nuni.$emit('update_article', 'follow')<\/p>\n<\/li>\n<li>\n<p>list.vue<\/p>\n<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>uni.$on(&#039;update_article&#039;, (e) =&gt; {\n                console.log(e);\n                if (e === &#039;follow&#039;) {\n                    this.listCatchData = {}\n                    this.load = {}\n                    this.getList(this.activeIndex)\n                }\n            })<\/code><\/pre>\n<ul>\n<li>list-card.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&lt;likes :types=&quot;types&quot; :item=&quot;item&quot;&gt;&lt;\/likes&gt;\nprops:{\ntypes: {\n            type: String,\n            default: &#039;&#039;\n        }\n    }<\/code><\/pre>\n<h2>\u5173\u6ce8\u4f5c\u8005\u9875\u9762\u5b9e\u73b0<\/h2>\n<ul>\n<li>\u65b0\u5efa\u7ec4\u4ef6 list-author<\/li>\n<li>follow.vue<\/li>\n<li>\u65b0\u5efa\u4e91\u51fd\u6570 get_author<\/li>\n<li>home-detail.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>setUpdateAuthor(author_id) {\n}).then(res =&gt; {\nuni.$emit(&#039;update_author&#039;)\n})<\/code><\/pre>\n<ul>\n<li>follow.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>onLoad() {\n    \/\/\u9996\u9875\u4e0e\u5173\u6ce8\u4f5c\u8005\u9875\u9762\u540c\u6b65\n    uni.$on(&#039;update_author&#039;, () =&gt; {\n        this.getAuthor()\n    })\n}<\/code><\/pre>\n<h2>\u4e2a\u4eba\u4e2d\u5fc3\u9875\u9762\u5b9e\u73b0<\/h2>\n<ul>\n<li>\u65b0\u5efa\u4e91\u51fd\u6570 get_user\/index.js<\/li>\n<li>App.vue<\/li>\n<li>store\/index.js<\/li>\n<li>common\/http.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import store from &#039;..\/store\/index.js&#039;\nconst dataObj = {\n        user_id: store.state.userinfo._id,\n        ...data\n    }<\/code><\/pre>\n<h2>\u6211\u7684\u6587\u7ae0\u5b9e\u73b0<\/h2>\n<ul>\n<li>\u65b0\u5efa\u9875\u9762 my-article.vue<\/li>\n<li>\u65b0\u5efa\u4e91\u51fd\u6570 get_my_article<\/li>\n<\/ul>\n<h3>\u4f5c\u4e1a,\u6ca1\u6709\u6587\u7ae0\u65f6\u663e\u793a\u6ca1\u6709\u6587\u7ae0,\u53c2\u8003 follow \u7684 no-data????<\/h3>\n<h2>\u610f\u89c1\u53cd\u9988\u9875\u9762\u5b9e\u73b0<\/h2>\n<ul>\n<li>\/pages\/feedback.vue<\/li>\n<li>\u65b0\u5efa\u4e91\u51fd\u6570 update_feedback<\/li>\n<\/ul>\n<h1>\u9002\u914d\u5fae\u4fe1\u5f00\u53d1\u8005\u5de5\u5177<\/h1>\n<ul>\n<li>\n<p>\u89c6\u9891\u4e2d\u51fa\u73b0\u7684\u95ee\u9898,loading \u7f16\u8bd1\u5230\u5728 list-card \u4e0a\u9762<br \/>\n<img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/09\/2022090422313659.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/09\/2022090422313659.png\" alt=\"\" \/><\/p><\/noscript>\n<\/li>\n<li>\n<p>list-item.vue<\/p>\n<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>    &lt;list-scroll class=&quot;list-scroll&quot; @loadmore=&quot;loadmore&quot;&gt;\n        &lt;view&gt;\n            &lt;!--\u8fd0\u884c\u5230\u5fae\u4fe1\u5f00\u53d1\u8005\u5de5\u5177\u4e0a:\u51fa\u73b0\u7684\u95ee\u9898,\u5916\u5c42\u52a0\u4e00\u4e2a view, \u539f\u56e0: list-card \u6700\u5f00\u59cb\u662f\u6ca1\u6709\u6e32\u67d3\u7684,\u901a\u8fc7\u6570\u636e\u63d2\u5165\u4e4b\u540e\u624d\u5f00\u59cb\u53bb\u6e32\u67d3\u5185\u5bb9 --&gt;\n            &lt;list-card mode=&quot;base&quot; :item=&quot;item&quot; v-for=&quot;item in list&quot; :key=&quot;item._id&quot;&gt;&lt;\/list-card&gt;\n        &lt;\/view&gt;\n\n        &lt;!-- \u6570\u636e\u5c11\u4e8e pageSize \u65f6,\u4e0d\u663e\u793a loadmore --&gt;\n        &lt;!-- \u5de6\u53f3\u7ffb\u9875\u65f6,\u52a0\u8f7d\u63d0\u793a\u6d88\u5931\u4e86  uni-load-more \u662f\u76f4\u63a5\u663e\u793a\u5728\u9875\u9762\u91cc\u9762\u7684,\u80af\u5b9a\u6bd4 list-card \u65e9--&gt;\n        &lt;uni-load-more v-if=&quot;list.length===0||list.length&gt; 7&quot; iconType=&quot;snow&quot; :status=&quot;load.loading&quot;&gt;\n        &lt;\/uni-load-more&gt;\n    &lt;\/list-scroll&gt;<\/code><\/pre>\n<h2>\u53f3\u6ed1\u5207\u6362\u5185\u5bb9\u65f6,\u663e\u793a '\u6ca1\u6709\u66f4\u591a\u6570\u636e\u4e86'<\/h2>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/09\/2022090422471651.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/09\/2022090422471651.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>\u5728 list-item \u4e2d\u52a0  ||'loading'<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>    &lt;uni-load-more v-if=&quot;list.length===0||list.length&gt; 7&quot; iconType=&quot;snow&quot; :status=&quot;load.loading||&#039;loading&#039;&quot;&gt;\n    &lt;\/uni-load-more&gt;<\/code><\/pre>\n<h2>\u5728\u5fae\u4fe1\u5f00\u53d1\u8005\u5de5\u5177\u6e05\u9664\u7f13\u5b58\u4e4b\u540e,\u62a5\u9519:\u8bf7\u6c42 get_label \u4e91\u51fd\u6570\u9519\u8bef:docId \u5fc5\u987b\u4e3a\u5b57\u7b26\u4e32\u6216\u6570\u5b57<\/h2>\n<ul>\n<li>pages\/tabbar\/index\/index.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>    import {\n        mapState\n    } from &#039;vuex&#039;\n\n    export default {\n        computed: {\n            ...mapState([&#039;userinfo&#039;])\n        },\n            watch: {\n            userinfo(newVal) {\n                this.getLabel()\n            }\n        },\n        onLoad() {\n            uni.$on(&#039;labelChange&#039;, (res) =&gt; {\n                this.tabList = []\n                this.tabIndex = 0\n                this.activeIndex = 0\n                this.getLabel()\n            })\n        }\n    }<\/code><\/pre>\n<h1>\u9002\u914d\u652f\u4ed8\u5b9d\u5c0f\u7a0b\u5e8f<\/h1>\n<ul>\n<li>\u6253\u5f00\u9879\u76ee\u76ee\u5f55:<\/li>\n<li>E:\\Project\\uni-app-project\\imooc-news\\unpackage\\dist\\dev\\mp-alipay<\/li>\n<\/ul>\n<h2>\u5934\u90e8<\/h2>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/09\/2022090423193692.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/09\/2022090423193692.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>page.json \u4e2d #f07373<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&quot;globalStyle&quot;: {\n        &quot;navigationBarTextStyle&quot;: &quot;black&quot;,\n        &quot;navigationBarTitleText&quot;: &quot;uni-app&quot;,\n        &quot;navigationBarBackgroundColor&quot;: &quot;#f07373&quot;,\n        &quot;backgroundColor&quot;: &quot;#F8F8F8&quot;\n    },<\/code><\/pre>\n<ul>\n<li>navbar.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&lt;!-- #ifndef MP-ALIPAY --&gt;\n    &lt;view :style=&quot;{height: statusBarHeight+&#039;px&#039;}&quot;&gt;&lt;\/view&gt;\n&lt;!-- #endif --&gt;<\/code><\/pre>\n<ul>\n<li>\u5bfc\u822a\u680f\u4e0b\u9762\u4f1a\u591a\u8282: \u7ed9\u81ea\u5b9a\u4e49\u5bfc\u822a\u680f\u52a0\u4e86\u4e2a\u5bfc\u822a\u680f\u9ad8\u5ea6\u5360\u4f4d\u5143\u7d20<\/li>\n<li>\u7ed9\u5360\u4f4d\u7b26\u51cf\u53bb\u8fd9\u4e2a\u9ad8\u5ea6<\/li>\n<\/ul>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/09\/2022090423302693.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/09\/2022090423302693.png\" alt=\"\" \/><\/p><\/noscript>\n<pre class=\"prettyprint linenums\" ><code>created() {\n\/\/ #ifdef MP-ALIPAY\n    this.statusBarHeight = 0\n\/\/ #endif\n}<\/code><\/pre>\n<h2>\u89c6\u9891\u4e2d\u5173\u6ce8\u9875\u9762\u6ca1\u663e\u793a\u5185\u5bb9,\u6211\u8fd9\u6709<\/h2>\n<ul>\n<li>follow.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>.follow {\n\/\/\u89c6\u9891\u4e2d\u8fd0\u884c\u5230\u652f\u4ed8\u5b9d,\u6ca1\u6709\u5185\u5bb9,\u4ed6\u91c7\u7528\u6ce8\u91ca\u8fd9\n\/\/ height: 100%;\n}<\/code><\/pre>\n<h2>\u8be6\u60c5\u9875\u5173\u6ce8\u6309\u94ae\u6548\u679c\u663e\u793a\u4e0d\u6b63\u786e<\/h2>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/09\/202209042335364.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/09\/202209042335364.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>home-detail.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>.detail-header_button {\n    padding: 0 15px;\n    flex-shrink: 0;\n    height: 30px;\n    line-height: 30px;\n    border-radius: 5px;\n    font-size: 12px;\n    color: #fff;\n    background-color: $mk-base-color;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>uni-app \u662f\u4ec0\u4e48? \u4f7f\u7528 Vue.js \u6280\u672f\u5f00\u53d1\u6240\u6709\u524d\u7aef\u5e94\u7528\u7684\u6846\u67b6 [\u8de8\u7aef\u6846\u67b6] \u7f16\u5199\u4e00\u5957\u4ee3\u7801\u7684\u540c\u65f6,\u53ef [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3730","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3730","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3730"}],"version-history":[{"count":125,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3730\/revisions"}],"predecessor-version":[{"id":3925,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3730\/revisions\/3925"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}