记uni-app第一次正式项目使用

2024-04-01 20:24:28

记uni-app第一次正式项目使用

UNI-APP的初应用

UNI-APP的初应用

安装HBuilderX，新建uni-app项目。

前言

这是我采用uni-app开发的第一次正式上线项目，使用过程中遇到了很多问题，于是写下这篇帖子作为记录。

UI框架

插件市场中导入uni ui，插件地址：https://ext.dcloud.net.cn/plugin?id=55，直接使用HBuilderX导入插件。

注：在选用ui框架时，由于项目主打h5，于是我首先采用的vant作为UI框架，项目功能开发完成后，却发现不适用于小程序，如果要选用vant，要采用最新版的vant-weapp进行使用，可以适配于H5、APP和微信小程序。

请求插件

在综合对比各个请求插件封装的适用性，本项目我采用了luch-request，使用npm方式导入：
第一步，在当前根目录初始化package.json：

npm init -y

第二步，安装luch-request：

npm i luch-request

图表插件

由于echarts需要做不同端的适配性，不利于多端使用，于是采用了ucharts。
优点：开发简单，多端适配
缺点：图表类型比较少
安装方式：直接从插件市场中导入项目，插件地址：https://ext.dcloud.net.cn/plugin?id=271

开发中遇到的问题

在功能开发结束后，由于项目调试时是使用的谷歌浏览器调试，调试没问题后，运行到微信小程序却出现了一系列问题，如下：

TypeError: Cannot read property ‘call’ of undefined

页面【components/header]错误:
 TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (runtime.js? [sm]:92)
    at Object.<anonymous> (vendor.js?t=wechat&s=1618449485193&v=80b273fbbf1b9c7e386feb4bac514f97:10338)
    at __webpack_require__ (runtime.js? [sm]:92)
    at Object.<anonymous> (header.js? [sm]:148)
    at Object._ (header.js? [sm]:222)
    at __webpack_require__ (runtime.js? [sm]:92)
    at Module._ (header.js? [sm]:131)
    at __webpack_require__ (runtime.js? [sm]:92)
    at Module._ (header.js? [sm]:91)
    at __webpack_require__ (runtime.js? [sm]:92)

这个问题在社区中很多人遇到，问题帖链接；在查看帖子按照大家的方式试过之后发现并没有什么用，于是开始查找自己代码问题，终于发现在自定义组件中不能引入js，如下图所示：
注释掉引入js的代码后报错消失。

2.微信小程序中自定义子组件的样式无法继承父组件的样式
父组件中样式表中定义的class等样式，子组件中使用父组件的样式需要使用/deep/，否则不起作用。

3.微信小程序中v-show不起作用，所有元素都显示出来了

原因：

由于v-show是给组件添加display:none的属性，但是组件样式中添加了display:flex，由于display:flex>display:none，所以并未控制到元素的显隐。

解决方法：

1.将v-show改为v-if；
2.在display：flex的组件外面添加一个父组件用于绑定v-show。

码农公寓