ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-04-15 17:01:05  阅读:221  来源: 互联网

标签:__ 插件 app 第一次 js sm 组件 uni display


记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

开发中遇到的问题

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

  1. 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。

标签:__,插件,app,第一次,js,sm,组件,uni,display
来源: https://blog.csdn.net/miyunie3964/article/details/115721577

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有