uniapp学习打卡第1天

时间：2024-03-23 07:34:25

这里写自定义目录标题

NPM安装及配置

首先需要去官网下载node.js（https://nodejs.org/en/），然后安装。
在Win7系统下，右键计算机—属性—高级系统设置—环境变量—新建NODE_PATH—node.js的安装路径，比如我的（D:\tools\node）—Path后面添加%NODE_PATH%—完成。
重启cmd 执行npm -v 即可。

VUE 安装及配置

uniapp学习打卡第1天

错误：当前cli项目版本较低不支持App的运行和发行:1、可以在命令行进入当前运行的项目目录，依次执行’npm update’和’vue add @dcloudio/hbuilderx’命令进行手动升级和安装，2、或将项目下的src目录拖入HBuilderX中以单独项目方式运行和发行App，3、或重新创建新的cli项目

uniapp学习打卡第1天

ERROR Error: Cannot find module ‘@dcloudio/uni-app-plus’

坑1：uni-app不支持vue中的过滤器

解决办法：从后台获取数据后始用js对数据进行处理，
例子:

始用过滤器时：

{{talk.date|formatTime}}

始用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)
后来看了官网知道了微信小程序不支持本地图标，

解决方案：从阿里巴巴矢量图标库 获取在线连接

uniapp学习打卡第1天
可以点击Unicode旁边的Font class然后点开里面的网址，将展示的内容替换本地的css就好了

坑4：普通vue项目代码粘过来改动很大，不支持html原生标签，类似微信小程序

而且目前uni-app 标签很少，组件也很少， uni-app中的view标签相当于html中的div或者p标签，text标签相当于p标签，
我今天只用了三个标签 button,view,image
贴一个官方的代码你们自己感受一下 全是一色的view标签:

uniapp学习打卡第1天

相关文章