利用uni-app生成微信小程序的踩坑记录

目录
  • 前言
  • 1.不允许id选择器
  • 2.默认竖排
  • 3.图片加载不出来
  • 4.eval函数不可用
  • 5.getStorage异步
  • 6.props的中的值不可修改
  • 7.wx.uploadFile携带字符串参数
  • 8.picker的multiSelector mode中选择框出现undefined
  • 总结

前言

毕设要求写一个浏览器端,一个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

总结

到此这篇关于利用uni-app生成微信小程序踩坑的文章就介绍到这了,更多相关uni-app生成微信小程序内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • uniapp,微信小程序中使用 MQTT的问题

    最近在uniapp打包成微信小程序的项目中第一次用到了MQTT.使用比较简单,但是还是遇到了一些问题.在此记录一下. 官方文档:MQTT Github 官方MQTT测试工具:MQTTX.测试工具使用说明 MQTT的js文件:mqtt.min.js 先上一点注意事项: (1)MQTT.js 一个 MQTT 协议的客户端库,用 JavaScript 编写,可用于 Node.js 和浏览器.在 Node.js 端可以通过全局安装使用命令行连接,同时还支持 MQTT ,MQTT TLS 证书连接:值得一

  • uniapp 实现微信小程序全局分享的示例代码

    目录 创建全局分享内容文件 引入并全局注册该文件 自定义页面分享内容  uniapp 实现微信小程序的全局转发给好友/分享到朋友圈的功能.主要使用 Vue.js 的 全局混入 概念. 下面直接上 实现步骤和代码: 创建全局分享内容文件 1.创建一个全局分享的 js 文件.示例文件路径为:@/common/share.js ,在该文件中定义全局分享的内容: export default { data() { return { // 默认的全局分享内容 share: { title: '全局分享的标

  • uniapp微信小程序:key失效的解决方法

    uniapp 代码 <template> <view> <image v-for="(item, i) in fileList" :key="item[urlKey]" :src="item[urlKey]"></image> </view> </template> <script> export default { props: { urlKey: {defau

  • 微信小程序uniapp实现左滑删除效果(完整代码)

    微信小程序uniapp实现左滑删除效果 实现效果 1,列表中侧滑删除 2,删除不同时存在 3,上下滑动与侧滑删除不影响 在本页面引入组件并使用 (文件在文章的最下方附上) 在需要左滑删除的地方使用 <view v-for="(item, index) in csListArrl" :key="index" :data-index="index"> <delSlideLeft :item="item" :dat

  • uniapp微信小程序实现一个页面多个倒计时

    本文实例为大家分享了uniapp实现一个页面多个倒计时的具体代码,供大家参考,具体内容如下 设计图(需求) 在这里插入图片描述 结构 <view class="group-list" v-for="item in message" :key="item.productId"> <view class="group-img" @click="navTo"> <image :src

  • uniapp在微信小程序中使用ECharts的方法

    今天使用uniapp集成Echarts,实现地图图表的展示 可以参照mpvue-echarts 参照:https://github.com/F-loat/mpvue-echarts https://ask.dcloud.net.cn/article/36288 进行改进 网上有很多教程,但都说的不是很明白,下面直接上步骤 1.npm install echarts mpvue-echarts 执行该命令后,会在node_modules下生成mpvue-echarts.echarts,然后把mpv

  • 利用uni-app生成微信小程序的踩坑记录

    目录 前言 1.不允许id选择器 2.默认竖排 3.图片加载不出来 4.eval函数不可用 5.getStorage异步 6.props的中的值不可修改 7.wx.uploadFile携带字符串参数 8.picker的multiSelector mode中选择框出现undefined 总结 前言 毕设要求写一个浏览器端,一个APP端,一个微信端,刚开始以为要学三个技术然后写三个客户端,后来知道了uni-app这个神器,一次编写就可以编译生成APP.H5以及各种小程序版本的客户端.然而我比较熟悉的

  • 微信小程序 slot踩坑的解决

    今天在使用微信小程序 component 里的 slot 时发现,当只用一个 slot 并且将 slot 命名后,页面中调用这个 slot 并不会加载进来. 研究尝试后发现,如果想要使用命名的方式调用单个 slot ,也需要像调用多个 slot 的方式 在 component/xxx.js 里开启多个 slot 的功能.下面看代码. // component <view class='slot'> <view>哈哈哈哈哈哈哈哈</view> <slot name=

  • windows上利用charles抓取微信小程序数据包,手机APP数据包(HTTP与HTTPS数据包)

    1.下载charles包.安装 Charles Proxy抓包工具 v4.1 破解文件 win64 附破解方法 2.关闭电脑防火墙 打开控制面板,选择Windows防火墙,关了(不关很可能没法抓包,在这栽过坑) 2.连接手机 2.1 用数据线把手机连上电脑 2.2 查电脑ip,命令行输入 ipconfig 2.3 修改手机网络代理 手机网络改为代理,ip为电脑ip,端口8888(charles默认端口,若被其他程序占用可修改,原则是保持电脑和手机一致) 3.安装SSL证书 (大多数app或小程序

  • MAC系统利用charles抓取微信小程序和手机APP数据包(http和https数据包)

    本文中使用的是mac上的抓包工具charles进行抓包,手机是华为荣耀8 下载并安装Charles for Mac Charles for Mac(HTTP信息抓包工具) V4.2.5 苹果电脑版 要想抓取到微信小程序的数据首先要解决的第一个问题件就是如何通过charles抓取手机上的数据具体配置过程如下: MAC上的Charles设置 第一步,charles上通过proxy->proxy setting进入代理设置,入口如下图所示 点击后进入如下所示界面 记住此处的port,默认为8888,也

  • Java中生成微信小程序太阳码的实现方案

    目录 背景 实现方案 生成有限制太阳码 实现步骤 获取小程序的access_token 调用微信api生成小程序太阳码 说明 参数说明 注意事项 获取小程序的access_token 调用微信api生成小程序太阳码 说明 参数说明 参数过长问题 解决方案 生成无限制太阳码 扩展功能 总结 背景 当前小程序盛行的时代,无论走在那里都会看到各种各样的小程序太阳码,小程序项目中经常也会用到小程序的太阳码,那么我们如何生成小程序的太阳码呢? 实现方案 我们可以通过如下的方法实现小程序太阳码生成. 生成有

  • 使用taro开发微信小程序遇到的坑总结

    Taro,京东凹凸实验室出品的适配多端的一个框架,Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要. 一.taro开发搭建 1.taro很方便就在于其环境搭建很轻松,照着官方文档几行代码就能搭建好. 2.在进行预览的时候,不同的方式区别是很大的

  • 从Chrome App看微信小程序的发展前景

    关于微信小程序的消息算是这几天互联网新闻中的一个热点话题,各种推想猜测也是层出不穷.小程序只是处于一个内测阶段,但是,2010年谷歌公司也曾经开发过基于Chrome浏览器的Chrome App,两者虽然是两款不同的产品,但是在很多地方都有很多的相似之处,对Chrome App的了解也许对我们对小程序的发张和前景的分析带来一定的帮助. 关于微信和Chrome 首先就是关于微信和Chrome两个平台的状况,微信给的月活跃用户为7亿而Chrome仅仅移动版就有10亿的用户数量,两者都拥有巨大的群众基础

  • 小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)

    开发中我们要做一些类似遮罩层或者页面header固定而页面内容滚动的效果时,往往会使用到:position: fiexd;属性,但是往往会出现绑定在定位元素上的事件无法触发,原因出现在哪里? 经过摸索,终于找到答案:元素定位之后, z-index的值默认还是0,又因为定位而导致元素脱离了原来的文档流(page页面层),所以,定位元素相对于用户来说,虽然看得见,但是就像已经"不存在"一样,所以必须设置值:z-index至少大于等于1,将定位元素暴露给用户,这样才能触发绑定在元素之上的事件

  • 详解小程序BackgroundAudioManager踩坑之旅

    由于贵公司业务发展需要,切图仔开始写起了小程序啦(兴奋地搓小手手) 贵公司是知识付费平台,需要音频播放课程,同时希望用户在退出小程序后依然可以听课.在这种情况下,小程序的API--BackgroundAudioManager就派得上用场啦. 在看完官方文档,信心满满地写完提测后,测试小姐姐找出的bug比我的工资还多!!(

  • mpvue+vant app搭建微信小程序的方法步骤

    mpvue使用 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 mpvue-quickstart 模板的新项目 $ vue init mpvue/mpvue-quickstart my-project # 安装依赖 $ cd my-project $ npm install # 启动构建 $ npm run dev vant使用 yarn add vant # 将node_modules下的vant-weapp下的dist目录复制到s

随机推荐