uniapp开发微信小程序踩坑记录

白菜豆腐花
5,661 阅读7分钟

1.微信小程序开发者工具打开正常，上传到微信开发者平台扫码后，发现找不到，

解决方式：打开调试工具，提示找不到page/index/index目录，模版项目只有page/index,进行修改多一层文件夹就可以了。或者微信后台修改地址

image.png

2. 代码质量报按需导入报错，在uniapp项目的manifest.json中源码试图里进行配置

"lazyCodeLoading": "requiredComponents",

image.png

3. message：Error: 上传失败：网络请求错误 非法的文件，错误信息：invalid fil？

没有将es6转成es5 在开发者工具勾选

image.png

5.进行打包后发布h5，无法访问

解决方式：将web打包路径设置成./(会默认走hash模式) ask.dcloud.net.cn/article/374…

如果是history模式，项目放在服务器上的 uniapp文件夹，web打包的时候就可以写/uniapp 这样访问应用就可以是域名+/uniapp

6. uniapp getPhoneNumber:fail operateWXData:fail jsapi has no permission" errno:

个人账号无法给他人使用，需要公司账号，进行认证后。

7. h5跨域

image.png

image.png

	"h5": {
		"title": "UReport",
		"uniStatistics": {
			"enable": true
		},
		"router": {
			"base": "./",
			"mode": "history"
		},
		"optimization": {
			"treeShaking": {
				"enable": true
			}
		},
		"template": "template.h5.html",
		"unipush": {
			"enable": true
		},
		"devServer": {
			"disableHostCheck": true,
			"proxy": {
			  "/siam": {
				"target": "https://XXX.XX.com/",
				"changeOrigin": true,
				"secure": false, // 如果是https接口，需要配置这个参数
				"pathRewrite": {
				  "^/siam": ""
				}
			  }
			}
		}
	},

image.png

image.png

7. input双向绑定失效

基础库选择最高

image.png

8. uniapp解决 vendor.js 体积过大的问题

排除引入比较大的插件、静态资源（js、img），运行时 勾选进行压缩 、分包

image.png

9.页面参数兼容性

route在h5可以获取，微信小程序获取失败切换成this.route在h5可以获取，微信小程序获取失败 切换成this.mp

10.ucharts-tooltip

  1. ucharts图表 h5 tooltip显示无问题，但是微信小程序tooltip不展示 原因：使用了scroll-view，在qiun-data-charts组件加上inScrollView即可

2.无法修改tooltip样式，原因： ucharts官方表示不支持插入html文本（写入标签样式代码，不会进行解析编译，当成纯文本展示出来，返回String） ，详情可查看www.ucharts.cn/v2/#/ask/qu…

11.uchart 图卡、样式错乱

开启最新基础库，启用canvas2d

image.png

12. uview无法组件内修改原生样式

尝试过样式穿透也是无效

解决方法：common.wxss里修改，注意选择器命名规范，避免冲突。

14. ucharts 图表点击事件

需求：点击图表进行下钻数据

  1. 点击X轴数据点：点击后，只能获取坐标信息，无法准确获取点击的坐标轴信息（@getIndex事件）

  2. 点击柱子：点击后，会与tooltip事件冲突，并且uniapp里移动端无法在tooltip中进行点击，也无法进行修改样式（html不会被解析）。

  3. 双击柱子：直接用组件引入ucharts,点击后不知道事件类型，但是我们可以模拟，连续点击一定事件时间范围内，认为是双击，再结合@getIndex事件，就可以不影响tooltip的情况下进行点击下钻数据。

15. 如何进行分包？设置分包了，如何验证自己的分包配置成功？

解决方式：官方分包方法

通俗来讲，就是创建一个文件夹，里边存储一些你认为可以独立运行的页面、组件、静态资源，接着在pages.json 按照微信分包的目录格式进行配置，在打包的时候，就会生成一个主包和一个分包。若不配置或者配置不正确，就只有主包生成，分包方式如下：

image.png

在pages.json中配置

image.png 到这里分包配置已完成，分包后访问路径，前缀是分包的包名

image.png 运行到小程序模拟器微信开发者工具后，查看分包：

image.png

image.png

就可以看到具体的分包、主包大小

image.png 查看分析报告，可以看到代码中导致体积过大的问题在哪里，开发者可以依据这个进行删除不需要的文件、更换合适大小的插件、静态资源的引入方式、分包进行处理，处理后并验证自己的处理是否生效，如以下问题:

uni_modules引入的插件过大，导致打包一直很慢，一直卡,提醒某个包过大，跳过es6转化压缩。

主要是因为uni_modules会打包进主包，主包超过一定的体积，会自动跳过es6转化和压缩，这有时候会导致项目无法运行、甚至无法发布。

解决方式：

  1. 按需引入。 寻找插件的定制化化包（如echart定制化），只引入需要的，减小它的体积，若不能再减了，又需要使用，就使用以下方式处理。
  2. 分包处理。把该插件当成分包里的组件进行引入,不放在uni_modules里，这样处理就不会打包在主包里，主包体积就会相应减小，就能顺利打包发布了。

16. 页面滚动问题

遇到的问题：

  1. ios橡皮筋效果，导致页面滑动卡顿、不流畅，用户甚至会误触，细节上体验不佳
  2. 期望：顶部tab不动且无橡皮筋效果，仅中间内容能滑动、提高滑动流畅度，避免误触

解决方式：

  1. 关掉橡皮筋：在page.json,将"disableScroll"设置为false
		{
				"path" : "pages/operate/index",
				"style" : 
				{
					"navigationStyle": "custom",
					"pageOrientation": "auto",
					"disableScroll": false,
					"app-plus":{
						"bounce":"none"
					}
				}
			},

上述配置会关掉橡皮筋，但也会导致整个页面不能够滑动，无论怎么设置内容overflow也是不生效的，但是可以借助scroll-view实现局部内容滑动，设置y轴方向可以滚动，scroll-view必须要传入固定的高度，否则也无法滑动，滑动内容高度计算： 滑动内容高度=可视区高度-顶部不滑动的距离

<scroll-view v-if="true" scroll-y :style="{height:scrollHeight}">
</scroll-view >

17. 链接上的参数获取不到

问题：h5、微信小程序、app-plus中获取链接参数兼容性=> $mp(h5&微信小程序正常获取到值，app-plus获取不到值) 、$route（只能h5获取到值，其他都不能）。

解决方式：使用vue的$store进行通信。

18. window中HBuilder 使用标准基座在iPhone中真机运行

没有ios开发者账号，也是可以通过爱思助手进行签名后真机运行的，步骤如下：

  1. 下载爱思助手：安装后手机接数据线连接window电脑进行相应的授权；

  2. 手机》设置》隐私与安全性》开发者模式（开启开发者模式）；

  3. 在爱思助手 使用APPID进行签名，官方步骤， 签名报错官方解决提示文档；

    遇到的问题：由于是公司的电脑，病毒防护软件等安全措施，会拦截掉我重签的进程，联系运维开放白名单无果，比较费时。解决方式：转用私人电脑，下载爱思助手，下载办公电脑hBuilder的iPhone_base.ipa,转移到私人电脑进行签名，下载后放到办公电脑，一样能够使用。 image.png

  4. HBuilder运行

image.png

image.png 重签重命名把文件放进去后 HBuilder会自动读取签名各种信息，就会显示HBuildeId

  1. 运行成功后效果如下，需要开发者在设置》通用》VPN与设备管理 进行信任授权才可打开应用；

image.png

image.png

注意: 通过appid重签的，有效期为7天，过期了需重新签名，才能继续使用，否则真机启动失败。

19. App Plus跨域

在UniApp中，App Plus解决跨域请求，可以通过以下方式来处理：

  1. 配置manifest.json文件： 在UniApp项目中的manifest.json文件中，添加对应的权限配置，以允许App Plus模块进行跨域请求。可以添加以下配置：

    {
  "app-plus": {
    "permissions": {
      "request": {
        "host": ["*"]
      }
    }
  }
}

    这将允许App Plus模块向任何主机发出跨域请求。

  2. 真机运行时手机与电脑连接在同一个网络；

20. Pc端无法打开小程序

主要是微信的PC端基础库太低，然后应用运行设置的基础库太高，建议降到PC端能够使用的最高版本就好，不建议降到很低，会影响应用的性能、和一些功能的使用。当前测试，pc端最高支持的基础库是3.3.1，未来微信更新后，可能就会支持得更高。

image.png

21. 参考

官方文档和社区问答有时候能够解决问题，但是搜索起来也费时，需要筛选，实在找不到解决方式，建议可以下载官方提供的功能齐全的项目模版例子来分析对比，看官方如何解决类似的功能点，最后照葫芦画瓢。

  1. uniapp

  2. uniapp社区

  3. 插件市场（项目例子非常多，总有一款适合你）

avatar
文章
阅读
粉丝