Dcloud,hbuilderX開發uni-app第一天踩坑記錄

其實大部分坑在 uni-app在官網都有介紹 具體位置在 在 uni-app 中使用 Vue.js 模塊

官方文檔中總結了不少坑，但我只說一下我今天遇到的：

坑1：uni-app不支持vue中的過濾器

解決辦法：從後臺獲取數據後始用js對數據進行處理，
例子:

始用過濾器時：

<div v-for="talk in talkList">
    <p>{{talk.date|formatTime}}</p>
</div>

始用uni-app:

uni.request({
        url: 'http://localhost:8088/talk/queryList', //僅爲示例，並不是真實接口地址。
        success: (res) => {
            this.talkList = res.data
            this.talkList.forEach(item => item.date = this.formatTime(item.date))
        }
    })

坑2: uni-app中vuex使用的區別

uni-app中this.$store爲undefind ,必需要在main.js中加入這行代碼

Vue.prototype.$store = store

詳細配置可點擊標題鏈接，uni-app官網有詳細說明，與普通vue項目不一樣的只是多了上面這行代碼

坑3:微信不支持本地字體圖標

以前個人iconfont.css是從 阿里巴巴矢量圖標庫 下載到本地的，可是uni-app不支持本地iconfont.css，報錯

00:42:22.580 Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './iconfont.eot?t=1521557349802' in 'D:\workspace\appProjects\uniQingchi\pages\index'
00:42:22.592     at factoryCallback (D:\app\HBuilderX\plugins\uniapp\node_modules\webpack\lib\Compilation.js:264:39)
00:42:22.592     at factory (D:\app\HBuilderX\plugins\uniapp\node_modules\webpack\lib\NormalModuleFactory.js:247:20)
00:42:22.603     at resolver (D:\app\HBuilderX\plugins\uniapp\node_modules\webpack\lib\NormalModuleFactory.js:65:21)
00:42:22.613     at asyncLib.parallel (D:\app\HBuilderX\plugins\uniapp\node_modules\webpack\lib\NormalModuleFactory.js:138:21)

後來看了官網知道了微信小程序不支持本地圖標，

解決方案：從阿里巴巴矢量圖標庫 獲取在線鏈接

能夠點擊Unicode旁邊的Font class而後點開裏面的網址，將展現的內容替換本地的css就行了

坑4：普通vue項目代碼粘過來改動很大，不支持html原生標籤，相似微信小程序

並且目前uni-app 標籤不多，組件也不多， uni-app中的view標籤至關於html中的div或者p標籤，text標籤至關於p標籤，
我今天只用了三個標籤 button,view,image
貼一個官方的代碼大家本身感覺一下 全是一色的view標籤: