mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
Deploying to gh-pages from @ youzan/vant-weapp@68be39fea2 🚀
This commit is contained in:
landluck
parent
26bf53878a
commit
20fa0f93dd
@ -37,20 +37,7 @@ yarn add @vant/weapp --production
|
|||||||
|
|
||||||
<span class="hljs-comment"># \u5B89\u88C5 0.x \u7248\u672C</span>
|
<span class="hljs-comment"># \u5B89\u88C5 0.x \u7248\u672C</span>
|
||||||
npm i vant-weapp -S --production
|
npm i vant-weapp -S --production
|
||||||
</code></pre></div><div class="van-doc-card"><h3 id="bu-zou-er-xiu-gai-app.json" tabindex="-1">\u6B65\u9AA4\u4E8C \u4FEE\u6539 app.json</h3><p>\u5C06 app.json \u4E2D\u7684 <code>"style": "v2"</code> \u53BB\u9664\uFF0C\u5C0F\u7A0B\u5E8F\u7684<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#style" target="_blank">\u65B0\u7248\u57FA\u7840\u7EC4\u4EF6</a>\u5F3A\u884C\u52A0\u4E0A\u4E86\u8BB8\u591A\u6837\u5F0F\uFF0C\u96BE\u4EE5\u8986\u76D6\uFF0C\u4E0D\u5173\u95ED\u5C06\u9020\u6210\u90E8\u5206\u7EC4\u4EF6\u6837\u5F0F\u6DF7\u4E71\u3002</p></div><div class="van-doc-card"><h3 id="bu-zou-san-xiu-gai-project.config.json" tabindex="-1">\u6B65\u9AA4\u4E09 \u4FEE\u6539 project.config.json</h3><p>\u5F00\u53D1\u8005\u5DE5\u5177\u521B\u5EFA\u7684\u9879\u76EE\uFF0C<code>miniprogramRoot</code> \u9ED8\u8BA4\u4E3A <code>miniprogram</code>\uFF0C<code>package.json</code> \u5728\u5176\u5916\u90E8\uFF0Cnpm \u6784\u5EFA\u65E0\u6CD5\u6B63\u5E38\u5DE5\u4F5C\u3002</p><p>\u9700\u8981\u624B\u52A8\u5728 <code>project.config.json</code> \u5185\u6DFB\u52A0\u5982\u4E0B\u914D\u7F6E\uFF0C\u4F7F\u5F00\u53D1\u8005\u5DE5\u5177\u53EF\u4EE5\u6B63\u786E\u7D22\u5F15\u5230 npm \u4F9D\u8D56\u7684\u4F4D\u7F6E\u3002</p><pre><code class="language-json"><span class="hljs-punctuation">{</span>
|
</code></pre></div><div class="van-doc-card"><h3 id="bu-zou-er-xiu-gai-app.json" tabindex="-1">\u6B65\u9AA4\u4E8C \u4FEE\u6539 app.json</h3><p>\u5C06 app.json \u4E2D\u7684 <code>"style": "v2"</code> \u53BB\u9664\uFF0C\u5C0F\u7A0B\u5E8F\u7684<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#style" target="_blank">\u65B0\u7248\u57FA\u7840\u7EC4\u4EF6</a>\u5F3A\u884C\u52A0\u4E0A\u4E86\u8BB8\u591A\u6837\u5F0F\uFF0C\u96BE\u4EE5\u8986\u76D6\uFF0C\u4E0D\u5173\u95ED\u5C06\u9020\u6210\u90E8\u5206\u7EC4\u4EF6\u6837\u5F0F\u6DF7\u4E71\u3002</p></div><div class="van-doc-card"><h3 id="bu-zou-san-gou-jian-npm-bao" tabindex="-1">\u6B65\u9AA4\u4E09 \u6784\u5EFA npm \u5305</h3><p>\u6253\u5F00\u5FAE\u4FE1\u5F00\u53D1\u8005\u5DE5\u5177\uFF0C\u70B9\u51FB <strong>\u5DE5\u5177 -> \u6784\u5EFA npm</strong>\uFF0C\u5E76\u52FE\u9009 <strong>\u4F7F\u7528 npm \u6A21\u5757</strong> \u9009\u9879\uFF0C\u6784\u5EFA\u5B8C\u6210\u540E\uFF0C\u5373\u53EF\u5F15\u5165\u7EC4\u4EF6\u3002</p><img style="width:500px;" src="https://img.yzcdn.cn/public_files/2019/08/15/fa0549210055976cb63798503611ce3d.png"></div><div class="van-doc-card"><h3 id="bu-zou-si-typescript-zhi-chi" tabindex="-1">\u6B65\u9AA4\u56DB typescript \u652F\u6301</h3><p>\u5982\u679C\u4F60\u4F7F\u7528 typescript \u5F00\u53D1\u5C0F\u7A0B\u5E8F\uFF0C\u8FD8\u9700\u8981\u505A\u5982\u4E0B\u64CD\u4F5C\uFF0C\u4EE5\u83B7\u5F97\u987A\u7545\u7684\u5F00\u53D1\u4F53\u9A8C\u3002</p><h4 id="an-zhuang-miniprogram-api-typings" tabindex="-1">\u5B89\u88C5 miniprogram-api-typings</h4><pre><code class="language-bash"><span class="hljs-comment"># \u901A\u8FC7 npm \u5B89\u88C5</span>
|
||||||
...
|
|
||||||
<span class="hljs-attr">"setting"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
|
|
||||||
...
|
|
||||||
<span class="hljs-attr">"packNpmManually"</span><span class="hljs-punctuation">:</span> <span class="hljs-keyword">true</span><span class="hljs-punctuation">,</span>
|
|
||||||
<span class="hljs-attr">"packNpmRelationList"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>
|
|
||||||
<span class="hljs-punctuation">{</span>
|
|
||||||
<span class="hljs-attr">"packageJsonPath"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"./package.json"</span><span class="hljs-punctuation">,</span>
|
|
||||||
<span class="hljs-attr">"miniprogramNpmDistDir"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"./miniprogram/"</span>
|
|
||||||
<span class="hljs-punctuation">}</span>
|
|
||||||
<span class="hljs-punctuation">]</span>
|
|
||||||
<span class="hljs-punctuation">}</span>
|
|
||||||
<span class="hljs-punctuation">}</span>
|
|
||||||
</code></pre><p>\u6CE8\u610F\uFF1A \u7531\u4E8E\u76EE\u524D\u65B0\u7248\u5F00\u53D1\u8005\u5DE5\u5177\u521B\u5EFA\u7684\u5C0F\u7A0B\u5E8F\u76EE\u5F55\u6587\u4EF6\u7ED3\u6784\u95EE\u9898\uFF0Cnpm\u6784\u5EFA\u7684\u6587\u4EF6\u76EE\u5F55\u4E3Aminiprogram_npm\uFF0C\u5E76\u4E14\u5F00\u53D1\u5DE5\u5177\u4F1A\u9ED8\u8BA4\u5728\u5F53\u524D\u76EE\u5F55\u4E0B\u521B\u5EFAminiprogram_npm\u7684\u6587\u4EF6\u540D\uFF0C\u6240\u4EE5\u65B0\u7248\u672C\u7684miniprogramNpmDistDir\u914D\u7F6E\u4E3A'./'\u5373\u53EF</p></div><div class="van-doc-card"><h3 id="bu-zou-si-gou-jian-npm-bao" tabindex="-1">\u6B65\u9AA4\u56DB \u6784\u5EFA npm \u5305</h3><p>\u6253\u5F00\u5FAE\u4FE1\u5F00\u53D1\u8005\u5DE5\u5177\uFF0C\u70B9\u51FB <strong>\u5DE5\u5177 -> \u6784\u5EFA npm</strong>\uFF0C\u5E76\u52FE\u9009 <strong>\u4F7F\u7528 npm \u6A21\u5757</strong> \u9009\u9879\uFF0C\u6784\u5EFA\u5B8C\u6210\u540E\uFF0C\u5373\u53EF\u5F15\u5165\u7EC4\u4EF6\u3002</p><img style="width:500px;" src="https://img.yzcdn.cn/public_files/2019/08/15/fa0549210055976cb63798503611ce3d.png"></div><div class="van-doc-card"><h3 id="bu-zou-wu-typescript-zhi-chi" tabindex="-1">\u6B65\u9AA4\u4E94 typescript \u652F\u6301</h3><p>\u5982\u679C\u4F60\u4F7F\u7528 typescript \u5F00\u53D1\u5C0F\u7A0B\u5E8F\uFF0C\u8FD8\u9700\u8981\u505A\u5982\u4E0B\u64CD\u4F5C\uFF0C\u4EE5\u83B7\u5F97\u987A\u7545\u7684\u5F00\u53D1\u4F53\u9A8C\u3002</p><h4 id="an-zhuang-miniprogram-api-typings" tabindex="-1">\u5B89\u88C5 miniprogram-api-typings</h4><pre><code class="language-bash"><span class="hljs-comment"># \u901A\u8FC7 npm \u5B89\u88C5</span>
|
|
||||||
npm i -D miniprogram-api-typings
|
npm i -D miniprogram-api-typings
|
||||||
|
|
||||||
<span class="hljs-comment"># \u901A\u8FC7 yarn \u5B89\u88C5</span>
|
<span class="hljs-comment"># \u901A\u8FC7 yarn \u5B89\u88C5</span>
|
||||||
@ -93,7 +80,7 @@ git <span class="hljs-built_in">clone</span> git@github.com:youzan/vant-weapp.gi
|
|||||||
<span class="hljs-comment"># \u6267\u884C\u7EC4\u4EF6\u7F16\u8BD1</span>
|
<span class="hljs-comment"># \u6267\u884C\u7EC4\u4EF6\u7F16\u8BD1</span>
|
||||||
npm run dev
|
npm run dev
|
||||||
|
|
||||||
</code></pre><p>\u63A5\u7740\u6253\u5F00\u5FAE\u4FE1\u5F00\u53D1\u8005\u5DE5\u5177\uFF0C\u5BFC\u5165<code>example</code>\u76EE\u5F55\u7684\u9879\u76EE\u5C31\u53EF\u4EE5\u9884\u89C8\u793A\u4F8B\u4E86\u3002</p></div><div class="van-doc-card"><h3 id="guan-yu-yong-hu-yin-si-bao-hu-zhi-yin" tabindex="-1">\u5173\u4E8E\u7528\u6237\u9690\u79C1\u4FDD\u62A4\u6307\u5F15</h3><p>@vant/weapp \u90E8\u5206\u7EC4\u4EF6\u4F7F\u7528\u4E86\u5FAE\u4FE1\u63D0\u4F9B\u7684\u63A5\u53E3\uFF0C\u5176\u4E2D\u90E8\u5206\u63A5\u53E3\u6D89\u53CA\u83B7\u53D6\u7528\u6237\u9690\u79C1\u4FE1\u606F\u3002</p><p>\u4F8B\u5982 <code><Uploader /></code> \u4F7F\u7528\u4E86\u5FAE\u4FE1\u63D0\u4F9B\u7684\u9009\u62E9\u7528\u6237\u76F8\u518C\u4E2D\u56FE\u7247\u63A5\u53E3<code>(wx.chooseImage)</code>\u3002</p><p>\u5F53\u5C0F\u7A0B\u5E8F\u5F15\u5165 @vant/weapp \u5E76\u53D1\u5E03\u65F6\uFF0C \u6839\u636E\u5FAE\u4FE1<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/" target="_blank">\u300A\u7528\u6237\u9690\u79C1\u4FDD\u62A4\u6307\u5F15\u586B\u5199\u8BF4\u660E\u300B</a>\uFF0C \u5982\u68C0\u6D4B\u5230\u4EE3\u7801\u4E2D\u5B58\u5728\u6D89\u53CA\u7528\u6237\u9690\u79C1\u4FE1\u606F\u63A5\u53E3\u5219\u9700\u586B\u5199\u7528\u6237\u9690\u79C1\u4FDD\u62A4\u6307\u5F15\u4FE1\u606F\uFF0C\u5982\u5DF2\u586B\u5199\u5219\u65E0\u9700\u91CD\u590D\u586B\u5199\u3002</p></div>`,15),T=[I],$={__name:"quickstart",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",D,T))}},A={class:"van-doc-markdown-body"},F=d(`<h1>\u5B9A\u5236\u4E3B\u9898</h1><div class="van-doc-card"><h3 id="bei-jing-zhi-shi" tabindex="-1">\u80CC\u666F\u77E5\u8BC6</h3><p>\u5C0F\u7A0B\u5E8F\u57FA\u4E8E <a href="https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=zh-cn" target="_blank">Shadow DOM</a> \u6765\u5B9E\u73B0\u81EA\u5B9A\u4E49\u7EC4\u4EF6\uFF0C\u6240\u4EE5 Vant Weapp \u4F7F\u7528\u4E0E\u4E4B\u914D\u5957\u7684 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties" target="_blank">CSS \u53D8\u91CF</a> \u6765\u5B9E\u73B0\u5B9A\u5236\u4E3B\u9898\u3002\u94FE\u63A5\u4E2D\u7684\u5185\u5BB9\u53EF\u4EE5\u5E2E\u52A9\u4F60\u5BF9\u8FD9\u4E24\u4E2A\u6982\u5FF5\u6709\u57FA\u672C\u7684\u8BA4\u8BC6\uFF0C\u907F\u514D\u8BB8\u591A\u4E0D\u5FC5\u8981\u7684\u56F0\u6270\u3002</p><p>CSS \u53D8\u91CF \u7684\u517C\u5BB9\u6027\u8981\u6C42\u53EF\u4EE5\u5728 <a href="https://caniuse.com/#feat=css-variables" target="_blank">\u8FD9\u91CC</a> \u67E5\u770B\u3002\u5BF9\u4E8E\u4E0D\u652F\u6301 CSS \u53D8\u91CF \u7684\u8BBE\u5907\uFF0C\u5B9A\u5236\u4E3B\u9898\u5C06\u4E0D\u4F1A\u751F\u6548\uFF0C\u4E0D\u8FC7\u4E0D\u5FC5\u62C5\u5FC3\uFF0C\u9ED8\u8BA4\u6837\u5F0F\u4ECD\u4F1A\u751F\u6548\u3002</p></div><div class="van-doc-card"><h3 id="yang-shi-bian-liang" tabindex="-1">\u6837\u5F0F\u53D8\u91CF</h3><p>\u5B9A\u5236\u4F7F\u7528\u7684 CSS \u53D8\u91CF \u4E0E Less \u53D8\u91CF \u540C\u540D\uFF0C\u4E0B\u9762\u662F\u4E00\u4E9B\u57FA\u672C\u7684\u6837\u5F0F\u53D8\u91CF\uFF0C\u6240\u6709\u53EF\u7528\u7684\u989C\u8272\u53D8\u91CF\u8BF7\u53C2\u8003 <a href="https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less" target="_blank">\u914D\u7F6E\u6587\u4EF6</a>\u3002</p><pre><code class="language-less"><span class="hljs-comment">// Component Colors</span>
|
</code></pre><p>\u63A5\u7740\u6253\u5F00\u5FAE\u4FE1\u5F00\u53D1\u8005\u5DE5\u5177\uFF0C\u5BFC\u5165<code>example</code>\u76EE\u5F55\u7684\u9879\u76EE\u5C31\u53EF\u4EE5\u9884\u89C8\u793A\u4F8B\u4E86\u3002</p></div><div class="van-doc-card"><h3 id="guan-yu-yong-hu-yin-si-bao-hu-zhi-yin" tabindex="-1">\u5173\u4E8E\u7528\u6237\u9690\u79C1\u4FDD\u62A4\u6307\u5F15</h3><p>@vant/weapp \u90E8\u5206\u7EC4\u4EF6\u4F7F\u7528\u4E86\u5FAE\u4FE1\u63D0\u4F9B\u7684\u63A5\u53E3\uFF0C\u5176\u4E2D\u90E8\u5206\u63A5\u53E3\u6D89\u53CA\u83B7\u53D6\u7528\u6237\u9690\u79C1\u4FE1\u606F\u3002</p><p>\u4F8B\u5982 <code><Uploader /></code> \u4F7F\u7528\u4E86\u5FAE\u4FE1\u63D0\u4F9B\u7684\u9009\u62E9\u7528\u6237\u76F8\u518C\u4E2D\u56FE\u7247\u63A5\u53E3<code>(wx.chooseImage)</code>\u3002</p><p>\u5F53\u5C0F\u7A0B\u5E8F\u5F15\u5165 @vant/weapp \u5E76\u53D1\u5E03\u65F6\uFF0C \u6839\u636E\u5FAE\u4FE1<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/" target="_blank">\u300A\u7528\u6237\u9690\u79C1\u4FDD\u62A4\u6307\u5F15\u586B\u5199\u8BF4\u660E\u300B</a>\uFF0C \u5982\u68C0\u6D4B\u5230\u4EE3\u7801\u4E2D\u5B58\u5728\u6D89\u53CA\u7528\u6237\u9690\u79C1\u4FE1\u606F\u63A5\u53E3\u5219\u9700\u586B\u5199\u7528\u6237\u9690\u79C1\u4FDD\u62A4\u6307\u5F15\u4FE1\u606F\uFF0C\u5982\u5DF2\u586B\u5199\u5219\u65E0\u9700\u91CD\u590D\u586B\u5199\u3002</p></div>`,14),T=[I],$={__name:"quickstart",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",D,T))}},A={class:"van-doc-markdown-body"},F=d(`<h1>\u5B9A\u5236\u4E3B\u9898</h1><div class="van-doc-card"><h3 id="bei-jing-zhi-shi" tabindex="-1">\u80CC\u666F\u77E5\u8BC6</h3><p>\u5C0F\u7A0B\u5E8F\u57FA\u4E8E <a href="https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=zh-cn" target="_blank">Shadow DOM</a> \u6765\u5B9E\u73B0\u81EA\u5B9A\u4E49\u7EC4\u4EF6\uFF0C\u6240\u4EE5 Vant Weapp \u4F7F\u7528\u4E0E\u4E4B\u914D\u5957\u7684 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties" target="_blank">CSS \u53D8\u91CF</a> \u6765\u5B9E\u73B0\u5B9A\u5236\u4E3B\u9898\u3002\u94FE\u63A5\u4E2D\u7684\u5185\u5BB9\u53EF\u4EE5\u5E2E\u52A9\u4F60\u5BF9\u8FD9\u4E24\u4E2A\u6982\u5FF5\u6709\u57FA\u672C\u7684\u8BA4\u8BC6\uFF0C\u907F\u514D\u8BB8\u591A\u4E0D\u5FC5\u8981\u7684\u56F0\u6270\u3002</p><p>CSS \u53D8\u91CF \u7684\u517C\u5BB9\u6027\u8981\u6C42\u53EF\u4EE5\u5728 <a href="https://caniuse.com/#feat=css-variables" target="_blank">\u8FD9\u91CC</a> \u67E5\u770B\u3002\u5BF9\u4E8E\u4E0D\u652F\u6301 CSS \u53D8\u91CF \u7684\u8BBE\u5907\uFF0C\u5B9A\u5236\u4E3B\u9898\u5C06\u4E0D\u4F1A\u751F\u6548\uFF0C\u4E0D\u8FC7\u4E0D\u5FC5\u62C5\u5FC3\uFF0C\u9ED8\u8BA4\u6837\u5F0F\u4ECD\u4F1A\u751F\u6548\u3002</p></div><div class="van-doc-card"><h3 id="yang-shi-bian-liang" tabindex="-1">\u6837\u5F0F\u53D8\u91CF</h3><p>\u5B9A\u5236\u4F7F\u7528\u7684 CSS \u53D8\u91CF \u4E0E Less \u53D8\u91CF \u540C\u540D\uFF0C\u4E0B\u9762\u662F\u4E00\u4E9B\u57FA\u672C\u7684\u6837\u5F0F\u53D8\u91CF\uFF0C\u6240\u6709\u53EF\u7528\u7684\u989C\u8272\u53D8\u91CF\u8BF7\u53C2\u8003 <a href="https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less" target="_blank">\u914D\u7F6E\u6587\u4EF6</a>\u3002</p><pre><code class="language-less"><span class="hljs-comment">// Component Colors</span>
|
||||||
<span class="hljs-variable">@text-color:</span> <span class="hljs-number">#323233</span>;
|
<span class="hljs-variable">@text-color:</span> <span class="hljs-number">#323233</span>;
|
||||||
<span class="hljs-variable">@border-color:</span> <span class="hljs-number">#ebedf0</span>;
|
<span class="hljs-variable">@border-color:</span> <span class="hljs-number">#ebedf0</span>;
|
||||||
<span class="hljs-variable">@active-color:</span> <span class="hljs-number">#f2f3f5</span>;
|
<span class="hljs-variable">@active-color:</span> <span class="hljs-number">#f2f3f5</span>;
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -26,9 +26,9 @@
|
|||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script type="module" crossorigin src="/vant-weapp/assets/main.3896dd28.js"></script>
|
<script type="module" crossorigin src="/vant-weapp/assets/main.d39e28d8.js"></script>
|
||||||
<link rel="modulepreload" href="/vant-weapp/assets/vue-libs.5e980ef0.js">
|
<link rel="modulepreload" href="/vant-weapp/assets/vue-libs.5e980ef0.js">
|
||||||
<link rel="modulepreload" href="/vant-weapp/assets/iframe-router.194ba64b.js">
|
<link rel="modulepreload" href="/vant-weapp/assets/iframe-router.96c44ab5.js">
|
||||||
<link rel="stylesheet" href="/vant-weapp/assets/main.a6b74c46.css">
|
<link rel="stylesheet" href="/vant-weapp/assets/main.a6b74c46.css">
|
||||||
</head>
|
</head>
|
||||||
<body ontouchstart>
|
<body ontouchstart>
|
||||||
|
|||||||
@ -30,9 +30,9 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script type="module" crossorigin src="/vant-weapp/assets/mobile.bcbbc1cd.js"></script>
|
<script type="module" crossorigin src="/vant-weapp/assets/mobile.2a9ead0c.js"></script>
|
||||||
<link rel="modulepreload" href="/vant-weapp/assets/vue-libs.5e980ef0.js">
|
<link rel="modulepreload" href="/vant-weapp/assets/vue-libs.5e980ef0.js">
|
||||||
<link rel="modulepreload" href="/vant-weapp/assets/iframe-router.194ba64b.js">
|
<link rel="modulepreload" href="/vant-weapp/assets/iframe-router.96c44ab5.js">
|
||||||
<link rel="stylesheet" href="/vant-weapp/assets/mobile.21b768a1.css">
|
<link rel="stylesheet" href="/vant-weapp/assets/mobile.21b768a1.css">
|
||||||
</head>
|
</head>
|
||||||
<body ontouchstart>
|
<body ontouchstart>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user