使用uni-app生成微信小程序踩的坑

本文分享了在uni-app框架下进行跨平台开发的经验,详细介绍了从浏览器端、APP端到微信小程序端的开发过程及遇到的问题,如样式适配、图片加载、eval函数使用、异步处理、props修改限制、wx.uploadFile参数传递、picker组件使用等,并提供了相应的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

毕设要求写一个浏览器端,一个APP端,一个微信端,刚开始以为要学三个技术然后写三个客户端,后来知道了uni-app这个神器,一次编写就可以编译生成APP、H5以及各种小程序版本的客户端。然而我比较熟悉的是web的前端开发,而且浏览器用于测试也是唾手可得,所以整个开发过程中用浏览器测试的基本上都很顺利,展现的效果也很好,然而在编译小程序端的时候出了很大的问题,整个页面都扭曲了,经过这两天的查资料与修复,终于得到了浏览器中的效果,正好也记录一下这些坑。

1.不允许id选择器

这个问题是最容易发现的,在h5页面中用id标记标签很常见,然后在css中用#+id来设置标签的style,但是微信小程序中是不能用id选择器的,从警告内容中很容易发现。
警告内容
从警告中还可以看出,小程序中标签名、属性名选择器都不能用。

2.默认竖排

在H5页面中,元素默认是横排的,但是在小程序中,元素是默认竖排的,因此最好显式的设置元素的横排竖排,这样就不会发生页面错乱了。

.row-arrange{
    flex-direction: row;	/*横排元素*/
}

3.图片加载不出来

其实这个原因官网的文档上有写,不过我没仔细看
官网文档
而且H5中用相对路径可以正常加载,但是在小程序中就不行了,所以最好还是用绝对路径吧。

../../../static/xxx.jpg # 相对路径
/static/xxx.jpg # 绝对路径

4.eval函数不可用

之前写H5的时候,总是很习惯的用eval(字符串)来得到数字、JavaScript对象等,但是在微信小程序端这些转换都会报错,因此最好的方式是使用对应的转换API,比如数字可以用parseInt、JSON对象可以用JSON.parse等。

5.getStorage异步

在H5页面中,这样写是可以拿到存储的数据的:

var data;
uni.getStorage({
	title : 'xxx',
	success : function(res){
		data = res.data;
	}
})
this.data = data;

但是在小程序中,这段代码就会出错,我猜是小程序中读取存储数据略慢吧,而且我上面的这种写法也不标准,因此严格应该这样写就不会出错:

var vm = this;
uni.getStorage({
	title : 'xxx',
	success : function(res){
		vm.data = res.data;
	}
})

6.props的中的值不可修改

props : { 
	questions : {
		type : Array,
		default : []
	},
},

如上所示,我一开始是直接利用questions中的数据通过v-for来进行动态的页面渲染,用这种方式questions的值可以直接从标签的属性设置,会非常方便,即使后面利用this.questions.push(x)给它增加新元素H5页面也可以更新。但是在微信小程序端就没有反应了,不管怎么修改,它都不能动态的进行渲染,因此我在data中增加了一个ques用来进行渲染的数据来源:

data() {
	return {
		ques : [],
	};
},
props : { 
	questions : {
		type : Array,
		default : []
	},
},
created : function(){
	...
	this.ques = this.questions;
},

然后只需要利用ques中的数据进行渲染即可,如果要添加元素,也是通过修改ques来办到,如this.ques.push(x)

7.wx.uploadFile携带字符串参数

上传文件时,按照微信官方的文档,总是不能成功提交表单格式的字符串参数,有一种解决方法是把上传文件和上传字符串分割成两个接口,但由于我的上传文件包含权限验证的token,因此必须在上传文件的同时携带token才行,所以最终用了拼接地址的方法解决了这个问题:

wx.uploadFile({
	url: vm.fileurl + '/file/uploadPic?token=' + tokenJson['token'] + '&userId=' + tokenJson['userId'], //图片文件上传接口
	filePath: vm.src,
	name: 'pic',  //
	header: { 
		'Content-Type': 'multipart/form-data',
	},
	formData: {
		method: 'POST'   //请求方式
	},
	success (res){
		...
	}
})

8.picker的multiSelector mode中选择框出现undefined

展示一下出错的效果图:

出错
可以看到所有的选项都成了undefined。

这里是因为我一开始的数据使用的都是普通数组,每一列都是字符串或数字数组,比如[[1,2,3],[1,2,3,4,5]]这样,在H5页面中这样做没有问题,但是在小程序中就会出现错误,因此这里每一列都必须采用对象数组,例如一个很简单的解决方案:

首先写数据的时候需要用对象数组的方式

data() {
    return {
		area : [[{'name':'北京市'},{'name':'河北省'}],[{'name':'邢台市'},{'name':'石家庄市'}],[{'name':'不知道县'}]],
		areaIndex : [1,0,0],
	}
}

然后在标签中用如下的方法:

<picker mode="multiSelector" :value="areaIndex" :range="area" range-key="name" @columnchange="changeColumn" style="width:100%;">
	<view class="row-arrange">
		<text class="little-font-size">{{area[0][areaIndex[0]].name}}</text>
		<text class="little-font-size">{{area[1][areaIndex[1]].name}}</text>
		<text class="little-font-size">{{area[2][areaIndex[2]].name}}</text>
	</view>
</picker>

注意这里的range-key不能带冒号,而且里面的值应该是对象数组中的key

<think>好的,我需要帮助用户了解如何在uni-app中调用微信小程序的功能。首先,我应该回顾用户提供的引用内容,确保信息准确。根据引用[1],uni-app支持调用微信小程序的原生API,比如获取用户信息、存储操作和网络请求。而引用[2]提到需要配置微信开发者工具以便使用更多功能,如真机调试。 接下来,我应该整理实现方案的具体步骤。首先,用户需要配置manifest.json文件,启用微信小程序特定设置,这包括AppID的填写。然后,使用uni-app的条件编译,针对微信小程序平台编写特定的代码,这样可以在不同平台保持兼容。例如,使用#ifdef MP-WEIXIN来包裹微信特有的API调用。 再者,直接调用微信原生API的方法,比如wx.request或wx.getStorage,这部分需要说明在uni-app中如何直接使用,同时提醒用户注意API的异步特性。另外,使用uni-app的API进行封装调用,比如uni.request,但用户可能也需要直接调用微信的API,这时候需要说明两者的区别和适用场景。 扩展能力部分,需要提到使用wx对象下的方法,如登录、支付等,并举例说明如何在uni-app中实现这些功能。同时,提醒用户某些高级功能可能需要引入微信小程序的插件或自定义组件,这时需要配置相关依赖。 注意事项也很重要,包括权限配置、异步处理、平台差异和调试工具的使用。特别是真机调试时,必须使用微信开发者工具,这点需要强调,因为预览版可能功能受限。 最后,生成相关问题,确保覆盖用户可能进一步想知道的内容,比如权限申请、数据缓存、支付集成和原生组件使用等。检查整个回答是否符合格式要求,正确使用LaTeX,没有数学公式,但保持结构清晰,分点说明。确保引用标记正确,例如[^1]和[^2]的位置合适,没有遗漏。</think>在uni-app中调用微信小程序原生功能主要通过三种方式实现,以下是具体实现方案和技术要点: ### 一、基础配置方案 1. **manifest.json配置** 在项目配置文件中启用微信小程序平台特性: ```json "mp-weixin": { "appid": "wx1234567890", // 微信小程序AppID "usingComponents": true // 启用原生组件支持 } ``` 2. **条件编译** 使用预处理指令实现平台特定代码: ```javascript // #ifdef MP-WEIXIN wx.showToast({ title: '微信原生提示' }) // #endif ``` ### 二、API调用方式 1. **直接调用原生API** 通过`wx`对象直接访问微信小程序API: ```javascript // 获取系统信息 wx.getSystemInfo({ success(res) { console.log(res.platform) } }) // 文件存储示例 wx.setStorage({ key: 'userToken', data: 'ABCD1234' }) ``` 2. **通过uni-app桥接调用** 使用uni-app的API进行跨平台封装: ```javascript uni.getSystemInfo({ success(res) { console.log(res.platform) // 自动适配微信小程序环境 } }) ``` ### 三、扩展功能实现 1. **支付功能集成** ```javascript wx.requestPayment({ timeStamp: '20230601120000', nonceStr: 'RANDOM_STRING', package: 'prepay_id=...', signType: 'MD5', paySign: 'SIGNATURE', success(res) { uni.showToast({ title: '支付成功' }) } }) ``` 2. **原生组件使用** 在页面配置中声明原生组件: ```json // pages.json { "usingComponents": { "custom-component": "/wxcomponents/custom/index" } } ``` ### 四、调试与部署 1. **微信开发者工具联调** - 在HBuilderX中生成微信小程序项目 - 使用`npm run dev:mp-weixin`生成开发包 - 通过微信开发者工具导入`/dist/dev/mp-weixin`目录 2. **真机调试** ```javascript wx.startLogManager({ level: 0 }) // 开启日志管理 wx.getLogManager().debug('调试信息') // 输出调试日志 ``` ### 注意事项 1. 权限申请需在`manifest.json`配置相关权限项 2. 异步API调用建议使用async/await封装 3. 部分API需配置服务器域名白名单 4. 使用`uni.canIUse`进行API兼容性检测
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值