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标签: