整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
圖網(wǎng)習(xí)慣于在做小程序之前先做成html5+vuejs的形式，因?yàn)閔tml5切圖是我們比較熟悉的方式，而且有專(zhuān)業(yè)的工具 以及瀏覽器調(diào)試也會(huì)更加的方便 靈活，效率高，而且html5的方式可以方便預(yù)覽看效果，方便調(diào)整，當(dāng)html5頁(yè)面做好確認(rèn)沒(méi)問(wèn)題以后 再轉(zhuǎn)成小程序或者官方出品wepy的方式，這個(gè)時(shí)候就需要找到html5和小程序之間的微妙不同，需要做以下調(diào)整，親測(cè)可用。
css需要調(diào)整的
把css中的px改為rpx，可以借助工具批量替換，如果使用的工具是 vscode 可以用插件 px to rpx，如果是hbuilder可以執(zhí)行批量替換。
html需要調(diào)整的
js需要調(diào)整的
this.$router.push({
path: ‘/course-detail’,
query: {
caseCode: ‘123’
}
})
挑戰(zhàn)30天在頭條寫(xiě)日記#
WePY (發(fā)音: /'wepi/)是一款讓小程序支持組件化開(kāi)發(fā)的框架，通過(guò)預(yù)編譯的手段讓開(kāi)發(fā)者可以選擇自己喜歡的開(kāi)發(fā)風(fēng)格去開(kāi)發(fā)小程序。框架的細(xì)節(jié)優(yōu)化，Promise，Async Functions 的引入都是為了能讓開(kāi)發(fā)小程序項(xiàng)目變得更加簡(jiǎn)單，高效。
同時(shí) WePY 也是一款成長(zhǎng)中的框架，大量吸收借鑒了一些優(yōu)化前端工具以及框架的設(shè)計(jì)理念和思想。如果 WePY 有不足地方，或者你有更好的想法，歡迎提交 ISSUE 或者 PR。
<style lang="less">
@color: #4D926F;
.num {
color: @color;
}
</style>
<template>
<div class="container">
<div class="num" @tap="num++">
{{num}}
</div>
<custom-component></custom-component>
<vendor-component></vendor-component>
<div>{{text}}</div>
<input v-model="text"/>
</div>
</template>
<config>
{
usingComponents: {
customComponent: '@/components/customComponent',
vendorComponent: 'module:vendorComponent'
}
}
</config>
<script>
import wepy from '@wepy/core';
wepy.page({
data: {
num: 0,
text: 'Hello World',
},
});
</script>npm install @wepy/cli@next -gwepy init standard myprojectcd myproject
npm installwepy build --watch使用微信開(kāi)發(fā)者工具新建項(xiàng)目，本地開(kāi)發(fā)選擇項(xiàng)目根目錄，會(huì)自動(dòng)導(dǎo)入項(xiàng)目配置。
我們稱(chēng)微信客戶端給小程序所提供的環(huán)境為宿主環(huán)境。小程序借助宿主環(huán)境提供的能力，可以完成許多普通網(wǎng)頁(yè)無(wú)法完成的功能。 更多小程序原理的相關(guān)知識(shí)可參考小程序官方文檔。
原生小程序中，每個(gè)頁(yè)面擁有獨(dú)自的一個(gè)頁(yè)面實(shí)例 Page，整個(gè)小程序只有一個(gè) App 實(shí)例，是全部頁(yè)面共享的。
同樣的，在 WePY 的環(huán)境當(dāng)中，每個(gè) WePY 頁(yè)面擁有獨(dú)自的 WepyPage 實(shí)例。小程序也會(huì)有 WepyApp 實(shí)例。它們并非是繼承自原生的 Page 和 App。WePY 提供 wepy.app，wepy.page，wepy.component 等入口 方法注冊(cè)程序、頁(yè)面、以及組件。注冊(cè)后在組件的生命周期事件(onLaunch/onLoad/created)里，會(huì)自動(dòng)創(chuàng)建相對(duì)應(yīng)的 WePY 實(shí)例。
<!-- app.wpy -->
<script>
import wepy from '@wepy/core'
wepy.app({
// 選項(xiàng)
})
</script>使用入口方法注冊(cè) App 時(shí)，可以傳入一個(gè)參數(shù)對(duì)象。這篇教程主要描述的就是如何使用這些選項(xiàng)來(lái)創(chuàng)建你想要的行為。
<!-- app.wpy -->
<config>
{
"pages": [
"pages/example"
]
}
</config><!-- pages/example.wpy -->
<script>
import wepy from '@wepy/core'
wepy.page({
// 選項(xiàng)
})
</script>注冊(cè) Page 時(shí)，可以傳入一個(gè)參數(shù)對(duì)象。這篇教程主要描述的就是如何使用這些選項(xiàng)來(lái)創(chuàng)建你想要的行為。
WePY 2.0 中，Page 同樣是使用小程序原生的 Component 方法進(jìn)行注冊(cè)的。
<!-- components/comA.wpy -->
<script>
import wepy from '@wepy/core'
wepy.component({
// 選項(xiàng)
})
</script><!-- pages/example.wpy -->
<config>
{
"usingComponents": {
"comA": "components/comA"
}
}
</config>與 WePY 1 或者 Vue 不同的是，組件的引用方式保留了原生的 usingComponents 方式。不可以使用 import 的方式導(dǎo)入。
使用 wepy.page 或者 wepy.component 注冊(cè)頁(yè)面或者組件時(shí)，它將 data 對(duì)象中的所有的屬性加入到 wepy 的 響應(yīng)式系統(tǒng) 中。當(dāng)這些屬性的值發(fā)生改變時(shí)，視圖將會(huì)產(chǎn)生“響應(yīng)”，即匹配更新為新的值。
wepy.page({
data: {
a: 1
},
plus: function () {
// 點(diǎn)擊 “+“ 按鈕式觸發(fā)
this.a++
}
})當(dāng)這些數(shù)據(jù)改變時(shí)，視圖會(huì)進(jìn)行重渲染。值得注意的是只有當(dāng)實(shí)例被創(chuàng)建時(shí) data 中存在的屬性才是響應(yīng)式的。也就是說(shuō)如果你添加一個(gè)新的屬性，比如：
wepy.page({
data: {
a: 1
},
plus: function () {
// 點(diǎn)擊 “+“ 按鈕式觸發(fā)
this.a++
},
sayHi: function () {
this.b = 'hi'
}
})那么對(duì) b 的改動(dòng)將不會(huì)觸發(fā)任何視圖的更新。如果你知道你會(huì)在晚些時(shí)候需要一個(gè)屬性，但是一開(kāi)始它為空或不存在，那么你僅需要設(shè)置一些初始值。比如：
wepy.page({
data: {
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
}
})WePY 單文件組件主要由 <script>，<template>，<style>，<config> 四部分組成（也包括小程序 <wxs> 標(biāo)簽）。
wepy.app 注冊(cè) App 是直接調(diào)用原生 App 方法進(jìn)行 App 注冊(cè)，生命周期與原生一致。可參見(jiàn)官方文檔 App
wepy.page 本質(zhì)上也是調(diào)用原生方法 Component 注冊(cè)頁(yè)面，因此它包含了 Component 的完整生命周期。同時(shí)，為了兼容對(duì)原有 Page 的使用習(xí)慣，也保留了所有 Page 特有的生命周期事件。
通過(guò) Page({}) 注冊(cè)頁(yè)面 | 通過(guò) wepy.page({}) 注冊(cè)頁(yè)面 | 說(shuō)明 |
onLoad | onLoad | 參看官方文檔 Page |
onShow | onShow | 同上 |
onReady | onReady | 同上 |
onHide | onHide | 同上 |
onUnload | onUnload | 同上 |
onPullDownRefresh | onPullDownRefresh | 同上 |
onReachBottom | onReachBottom | 同上 |
onShareAppMessage | onShareAppMessage | 同上 |
onPageScroll | onPageScroll | 同上 |
onResize | onResize | 同上 |
onTabItemTap | onTabItemTap | 同上 |
onAddToFavorites | onAddToFavorites | 同上 |
- | created | 參看官方文檔 Component |
- | attached | 同上 |
- | ready | 同上 |
- | moved | 同上 |
- | detached | 同上 |
- | error | 同上 |
wepy component 實(shí)例生命周期與原生小程序的 組件生命周期 一致，在 wepy component 實(shí)例中，您可以使用如下生命周期鉤子：
wepy.component 注冊(cè)組件除了原生的 Component 生命周期外，還定義了某些其它生命周期。
通過(guò) Component({}) 注冊(cè)頁(yè)面 | 通過(guò) wepy.component({}) 注冊(cè)頁(yè)面 | 說(shuō)明 |
- | beforeCreate | 本質(zhì)上與wepy.created 一樣都是在 Component.created 階段觸發(fā)，但 wepy.beforeCreate 在 Component.created 剛進(jìn)入時(shí)觸發(fā)，然后進(jìn)行 WePY 的 data, props, methods 等等初始化，完成后再觸發(fā) wepy.created |
created | created | 參看官方文檔 Component |
attached | attached | 同上 |
ready | ready | 同上 |
moved | moved | 同上 |
detached | detached | 同上 |
error | error | 同上 |
不排除一些情況，小程序進(jìn)行版本庫(kù)升級(jí)后，添加或者刪除了新的生命周期函數(shù)，而且 WePY 并沒(méi)有及時(shí)的進(jìn)行更新，而且導(dǎo)致無(wú)法使用最新的生命周期函數(shù)。在這種情況下，開(kāi)發(fā)者通過(guò)參數(shù)自行添加最新的生命周期函數(shù)。使用方法如下：
wepy.app({ ... }, {
lifecycle: {
// 定義要添加生命周期到 app 或者 page 或者 component
// 值類(lèi)型為：String 或者 Array 或者 Function
// 值為需要添加的生命周期一個(gè)或者多個(gè)函數(shù)名，或者返回生命周期的函數(shù)數(shù)組的方法
app: 'onSomeTime', // 給 App 添加一個(gè) `onSomeTime` 生命周期函數(shù)
page: ['onTime1', 'onTime2'], // 給 Page 添加兩個(gè)生命周期函數(shù)
component: function (lifecycles) { // 刪除 Component 最后一個(gè)生命周期函數(shù)
lifecycles.pop();
retrun lifecycles;
}
}
})下圖展示了 頁(yè)面/組件 實(shí)例的生命周期。你不需要立馬弄明白所有的東西，不過(guò)隨著你的不斷學(xué)習(xí)和使用，它的參考價(jià)值會(huì)越來(lái)越高。
WePY 繼承了 WXML 的基本模板語(yǔ)法，并支持大部分 Vue 模板語(yǔ)法。
WXML（WeiXin Markup Language）是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，用來(lái)描述小程序頁(yè)面的結(jié)構(gòu)
同時(shí)，WePY 允許你使用大部分 HTML 模板標(biāo)簽，經(jīng)編譯器編譯后，會(huì)將模板標(biāo)簽的轉(zhuǎn)換成標(biāo)準(zhǔn)的 WXML 模板語(yǔ)法。
標(biāo)簽 | 轉(zhuǎn)換后 |
select | picker |
datalist | picker |
img | image |
source | audio |
video | video |
track | video |
a | navigator |
span | label |
其它 | view |
以下案例均使用 HTML 模板標(biāo)簽作為參考
數(shù)據(jù)綁定最常見(jiàn)的形式就是使用“Mustache”語(yǔ)法 (雙大括號(hào)) 的文本插值：
<div>hello, {{ name }}</div>Mustache 標(biāo)簽將會(huì)被替代為對(duì)應(yīng)數(shù)據(jù)對(duì)象上 name 屬性的值。無(wú)論何時(shí)，綁定的數(shù)據(jù)對(duì)象上 name 屬性發(fā)生了改變，插值處的內(nèi)容都會(huì)更新。
<div v-bind:id="id"></div>此時(shí)不能使用 Mustache 語(yǔ)法
<div id="{{ id }}"></div>此時(shí)必須使用 Mustache 語(yǔ)法
<div v-if="condition"></div>此時(shí)不能使用 Mustache 語(yǔ)法
<div wx:if="{{ condition }}"></div>此時(shí)必須使用 Mustache 語(yǔ)法
兩種方式均不能使用 Mustache 語(yǔ)法
<div v-on:tap="tapHandler"></div>
<!-- or -->
<div @tap="tapHandler"></div><div bindtap="tapHandler"></div>可以在 {{}} 內(nèi)進(jìn)行簡(jiǎn)單的運(yùn)算，目前支持原生小程序的所有運(yùn)算方式，如下：
{{ ok ? 'YES' : 'NO' }}{{ a + b }}{{ length > 5 }}{{ "hello" + name }}{{ object.key }}
{{ array[0] }}也可以在 Mustache 內(nèi)直接進(jìn)行組合，構(gòu)成新的對(duì)象或者數(shù)組，詳情請(qǐng)閱讀 小程序官方文檔
WePY 推薦使用 v-show，v-if 控制條件渲染
// example 01
<div wx:if="{{ condition }}"></div>
// example 02
<div wx:if="{{ condition2 }}"></div>
<div wx:else></div>
// example 03
<div wx:if="{{ condition3 }}"></div>
<div wx:elif="{{ condition4 }}"></div>
<div wx:else></div><div hidden="{{ condition }}"></div>// example 01
<div v-if="condition"></div>
// example 02
<div v-if="condition2"></div>
<div v-else></div>
// example 03
<div v-if="condition3"></div>
<div v-else-if="condition4"></div>
<div v-else></div>編譯后：
// example 01
<view wx:if="{{ condition }}"></view>
// example 02
<view wx:if="{{ condition2 }}"></view>
<view wx:else></view>
// example 03
<view wx:if="{{ condition3 }}"></view>
<view wx:elif="{{ condition4 }}"></view>
<view wx:else></view><div v-show="condition"></div>編譯后：
<view hidden="{{ !condition }}"></view>WePY 2 推薦使用 Vue v-for 指令進(jìn)行列表渲染
編譯前：
// example 01
<div v-for="item in array">{{index}}: {{item.message}}</div>
// example 02
<div v-for="(item, idx) in array">
{{idx}}: {{itemName.message}}
</div>編譯后：
// example 01
<view wx:for="{{array}}">{{index}}: {{item.message}}</view>
// example 02
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>未特殊提及的信息可優(yōu)先參考 vue官方文檔
小程序原生的事件系統(tǒng) 使用bind，catch 等關(guān)鍵字進(jìn)行事件監(jiān)聽(tīng)。 而在 WePY 中，事件沿用了 Vue 的風(fēng)格，使用 v-on 或者是 @ 操作符進(jìn)行事件監(jiān)聽(tīng)。同時(shí) WePY 中會(huì)有一個(gè)統(tǒng)一的事件分發(fā)器接管原生事件。大致如下圖：
WePY 在編譯過(guò)程中，會(huì)找到所有監(jiān)聽(tīng)事件，并為其分配事件 ID。同時(shí)將事件代碼（可以是一個(gè)方法，也可以是一個(gè)簡(jiǎn)單的代碼片段）注入至 JS 代碼中。 然后當(dāng)事件分發(fā)器接收到原生事件時(shí)，會(huì)通過(guò)事件 ID，分發(fā)到相應(yīng)的事件邏輯當(dāng)中。
這樣做的好處主要是：
WePY 不僅可以支持到響應(yīng)事件監(jiān)聽(tīng)，也可以支持到像 Web 原生，或者 Vue 的那種，使用簡(jiǎn)單代碼片段的監(jiān)聽(tīng)方式，示例如下：
<template>
<!-- 使用代碼片段響應(yīng)事件 -->
<button @tap="num =+ 1">Counter - {{num}}</button>
<!-- 類(lèi)原生方式，使用事件函數(shù)響應(yīng)事件 -->
<button @tap="handler">Handle my event</button>
<!-- 類(lèi)Vue方式，原生不支持?jǐn)y帶參數(shù) -->
<button @tap="handlerWithArgs(1, 2)">Handle my event with arguments</button>
</template>
<script>
import wepy from '@wepy/core';
wepy.page({
data: {
num: 0,
},
methods: {
handler() {
// do something
},
handlerWithArgs(a, b) {
console.log(a, b);
}
}
})
</script>注： 原生小程序中使用 <div data-hi="1"></div> 的方式傳遞參數(shù)，然后使用 event.currentTarget.dataset.hi 的方式獲取參數(shù)。 在 WePY 中請(qǐng)盡量使用攜帶參數(shù)響應(yīng)事件去完成參數(shù)的傳遞與獲取。WePY 會(huì)在編譯時(shí)為你綁定 data-xxx 并且在事件分發(fā)器中貼心的為你處理好參數(shù)的。
小程序原生事件會(huì)傳遞一個(gè) event 參數(shù)。而 WePY 的事件分發(fā)器在處理事件時(shí)會(huì)有一個(gè) $event 參數(shù)。 $event 參數(shù)是對(duì) event 進(jìn)行了一層包裝，目地是為了無(wú)侵入地對(duì)齊 Web Event 標(biāo)準(zhǔn)屬性。而其中 $event.$wx === event。 因此，WePY 中響應(yīng)事件獲得的事件參數(shù)均是指 $event。如果想拿到原生事件參數(shù)，請(qǐng)使用 $event.$wx。
當(dāng)使用類(lèi)原生方式，使用響應(yīng)事件方法名進(jìn)行事件監(jiān)聽(tīng)時(shí)，響應(yīng)事件會(huì)接收到一個(gè) $event 參數(shù)。 當(dāng)使用帶參函數(shù)進(jìn)行事件監(jiān)聽(tīng)時(shí)，默認(rèn)不會(huì)拿到事件的 $event。 該行為與 Vue 行為是一致的。此時(shí)若想拿到 $event 需要指定 $event 參數(shù)。
示例：
<!-- click 會(huì)接收到一個(gè) $event 參數(shù) -->
<button @tap="click">Click</button>
<!-- click 會(huì)接收一個(gè)為 1 的參數(shù) -->
<button @tap="click(1)">Click</button>
<!-- click 會(huì)接受兩個(gè)參數(shù): 1, $event -->
<button @tap="click(1, $event)"小程序的事件系統(tǒng)中，可以使用 bind, catch, capture-bind, capture-catch 等來(lái)處理事件的冒泡與捕獲，其中區(qū)別請(qǐng)參考官方文檔。
在 WePY 中，使用修飾符來(lái)完成這一動(dòng)作，相對(duì)來(lái)說(shuō)更加靈活與易讀。示例：
<!-- 等同于 bind:tap -->
<div @tap="myclick"></div>
<!-- 等同于 catch:tap -->
<div @tap.stop="myclickStop"></div>
<!-- 等同于 capture-bind:tap -->
<div @tap.capture="myclickCapture"></div>
<!-- 等同于 capture-catch:tap -->
<div @tap.stop.capture="myclickCaptureStop"></div>
<!-- 等同于 capture-catch:tap 修飾符中無(wú)先后關(guān)系 -->
<div @tap.capture.stop="myClickCaptureStopWithParams"></div>
作用：標(biāo)識(shí)取消事件冒泡，對(duì)應(yīng)原生事件中的 catch
在下邊這個(gè)例子中，點(diǎn)擊 inner view 會(huì)先后調(diào)用 handleTap3 和 handleTap2 (因?yàn)閠ap事件會(huì)冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父節(jié)點(diǎn)傳遞)，點(diǎn)擊 middle view 會(huì)觸發(fā) handleTap2，點(diǎn)擊 outer view 會(huì)觸發(fā) handleTap1。
<div id="outer" @tap="handleTap1">
outer view
<div id="middle" @tap.stop="handleTap2">
middle view
<div id="inner" @tap="handleTap3">
inner view
</div>
</div>
</div>
作用：標(biāo)識(shí)事件捕獲階段，對(duì)應(yīng)原生事件中的 capture-xxxx
捕獲階段位于冒泡階段之前，且在捕獲階段中，事件到達(dá)節(jié)點(diǎn)的順序與冒泡階段恰好相反。需要在捕獲階段監(jiān)聽(tīng)事件時(shí)，可以采用 .capture、.capture.catch 修飾符，后者將中斷捕獲階段和取消冒泡階段。
在下面的代碼中，點(diǎn)擊 inner view 會(huì)先后調(diào)用 handleTap2、handleTap4、handleTap3、handleTap1。
<div id="outer" @touchstart="handleTap1" @touchstart.capture="handleTap2">
outer view
<div id="inner" @touchstart="handleTap3" @touchstart.capture="handleTap4">
inner view
</div>
</div>如果將上面代碼中的第一個(gè) capture 后面加一個(gè) catch 修飾符，將只觸發(fā) handleTap2。
<div id="outer" @touchstart="handleTap1" @touchstart.capture.catch="handleTap2">
outer view
<div id="inner" @touchstart="handleTap3" @touchstart.capture="handleTap4">
inner view
</div>
</div>作用：標(biāo)識(shí)使用WXS函數(shù)響應(yīng)事件
小程序基礎(chǔ)庫(kù) 2.4.4 開(kāi)始支持，低版本需做兼容處理
wxs 響應(yīng)事件的背景及實(shí)現(xiàn)方案，參考 小程序官方文檔
<wxs module="test" src="./test.wxs"></wxs>
<div change:prop="{{test.propObserver}}" :prop="propValue" @touchmove.wxs="test.touchmove" class="movable"></div>
上面的 change:prop（屬性前面帶 change: 前綴）是在 prop 屬性被設(shè)置的時(shí)候觸發(fā) WXS 函數(shù)，值必須用{{}}括起來(lái)。在 propValue 值發(fā)生變化之后會(huì)觸發(fā)。
當(dāng) prop 屬性的值被設(shè)置 WXS 函數(shù)就會(huì)觸發(fā)，而不只是值發(fā)生改變，所以在頁(yè)面初始化的時(shí)候會(huì)調(diào)用一次 WXS 中 propObserver 的函數(shù)。
WXS 文件 test.wxs 里面定義并導(dǎo)出事件處理函數(shù)和屬性改變觸發(fā)的函數(shù)：
module.exports = {
touchmove: function(event, instance) {
console.log('log event', JSON.stringify(event))
},
propObserver: function(newValue, oldValue, ownerInstance, instance) {
console.log('prop observer', newValue, oldValue)
}
}
作用：標(biāo)識(shí)使用互斥事件
小程序基礎(chǔ)庫(kù) 2.8.2 開(kāi)始支持，低版本需做兼容處理 該修飾符 WePY 暫不支持
v-model 本質(zhì)上是語(yǔ)法糖，它會(huì)根據(jù)控件類(lèi)型自動(dòng)選取正確的方法來(lái)更新元素
<input v-model="inputmodel" />
<script>
import wepy from '@wepy/core';
wepy.page({
data: {
inputmodel: ''
}
})
</script><textarea v-model="inputmodel" />
<script>
import wepy from '@wepy/core';
wepy.page({
data: {
inputmodel: ''
}
})
</script><picker v-model="pickermodel" range="{{array}}">
<div class="picker">
當(dāng)前選擇：{{pickermodel}}
</div>
</picker>
<script>
import wepy from '@wepy/core';
wepy.page({
data: {
array: ['美國(guó)', '中國(guó)', '巴西', '日本'],
pickermodel: ''
}
})
</script>
<switch v-model="switchmodel" />
<script>
import wepy from '@wepy/core';
wepy.page({
data: {
switchmodel: ''
}
})
</script>小程序的radio目前不支持 change 事件, 請(qǐng)使用radio-group標(biāo)簽
<radio-group v-model="radiomodel">
<label>
<div>
<radio value="美國(guó)"></radio>
</div>
</label>
</radio-group>
<script>
import wepy from '@wepy/core';
wepy.page({
data: {
radiomodel: ''
}
})
</script>小程序的checkbox目前不支持 change 事件, 請(qǐng)使用checkbox-group標(biāo)簽
<checkbox-group v-model="checkboxmodel">
<label>
<div>
<checkbox value="美國(guó)"></checkbox>
</div>
</label>
</checkbox-group>
<script>
import wepy from '@wepy/core';
wepy.page({
data: {
checkboxmodel: ''
}
})
</script>https://github.com/Tencent/wepy
文件后綴為.wpy，可共用vue高亮，但需要手動(dòng)安裝。
打開(kāi)Sublime->Preferences->Browse Packages..進(jìn)入用戶包文件夾。
在此文件夾下打開(kāi)cmd，運(yùn)行
git clone git@github.com:vuejs/vue-syntax-highlight.git，無(wú)GIT用戶可以直接下載zip包解壓至當(dāng)前文件夾。
關(guān)閉.wpy文件重新打開(kāi)即可高亮。
打開(kāi)Preferences，搜索Plugins，搜索Vue.js插件并安裝。
打開(kāi)Preferences，搜索File Types，找到Vue.js Template，在Registered Patterns添加*.wpy，即可高亮。
在Atom里先安裝vue的語(yǔ)法高亮 - language-vue，如果裝過(guò)了就忽略這一步。
打開(kāi)Atom -> Config菜單。在core鍵下添加：
customFileTypes:
"text.html.vue": [
"wpy"
]
在vscode里先安裝vue的語(yǔ)法高亮 - language-vue，如果裝過(guò)了就忽略這一步。
在項(xiàng)目根目錄下，建立.vscode目錄
在.vscode里建立settings.json文件，內(nèi)容如下：
{
"git.ignoreLimitWarning": true,
"files.associations": {
"*.wxml": "html",
"*.wxss": "css",
"*.wpy": "vue"
}
}
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
