uniapp发布h5和小程序样式或者一些其他问题

1、发布小程序时,千万不要带有img、span、a这样的h5才能识别的标签,改成image、text、view这样的形式,样式里也记得改,具体看uniapp官网组件文档

2、使用组件或者input之类的标签时,不要在外面包text,只能包view,不然小程序里会当成行内元素处理而消失,就算使用display也无济于事,text尽量避免包裹着其他元素,不然点击事件如tap等也会失效(h5不会),如

<text>

        <text @tap="handleTap()"></text> //此处tap会失效

</text>

3、引用组件库如uni-ui时,如果外层还单独包了一个<view></view>容器,在小程序下可能样式会丢失

4、用class定义样式,不要使用id,不然会丢失样式!因为id在小程序中属于传递值的属性

5、uniapp 打包成微信小程序this.$refs返回空对象,这个是因为uniapp的ref属性不能用在uniapp的内置组件上面,只能用在自定义组件上面

6、uniapp的input type=“checkbox” 不支持小程序,建议都写成组件checkbox,调整大小的时候用transfrom调整,样式不起作用的情况下,可以写全局样式,值参考0.4

/* #ifndef H5 */
checkbox{
	transform: scale(0.7);
}
/* #endif */

7、每个子元素点击事件,如果父元素也有,记得加stop避免事件冒泡,在wx小程序上

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果您想在uniapp微信小程序中模拟地图样式,可以通过以下步骤实现: 1. 引入腾讯地图SDK。 在项目的 `pages.json` 文件中,将 `"usingComponents"` 中的 `"map"` 组件改为 `"taro-map"` 组件,并在 `app.js` 中引入腾讯地图SDK。 ``` // app.js import QQMapWX from './libs/qqmap-wx-jssdk' Vue.prototype.qqmapsdk = new QQMapWX({ key: 'yourKey' }) ``` 2. 设置地图样式。 在 `map` 组件中添加 `setting` 属性,设置地图样式。您可以通过腾讯地图提供的地图样式工具,自定义地图样式。 ``` <map :setting="{ style: 'styleJson', skew: 0, rotate: 0, showLocation: true, showScale: true, showCompass: true, enable3D: false, enableOverlooking: false, enableZoom: true, enableScroll: true, enableRotate: false, enableSatellite: false, enableTraffic: false, enablePoi: true }" :styleJson="styleJson" ></map> ``` 3. 定义地图样式。 在 `data` 中定义 `styleJson` 对象,设置地图样式。 ``` data() { return { styleJson: [ { 'featureType': 'land', 'elementType': 'geometry', 'stylers': { 'color': '#f5f5f5' } }, { 'featureType': 'water', 'elementType': 'geometry', 'stylers': { 'color': '#c9c9c9' } }, { 'featureType': 'road', 'elementType': 'geometry', 'stylers': { 'color': '#ffffff' } }, { 'featureType': 'road', 'elementType': 'labels.text.fill', 'stylers': { 'color': '#9ca5b3' } }, { 'featureType': 'administrative.locality', 'elementType': 'labels.text.fill', 'stylers': { 'color': '#bdbdbd' } }, { 'featureType': 'poi', 'elementType': 'labels.text.fill', 'stylers': { 'color': '#757575' } }, { 'featureType': 'poi.park', 'elementType': 'geometry', 'stylers': { 'color': '#c9c9c9' } }, { 'featureType': 'poi.park', 'elementType': 'labels.text.fill', 'stylers': { 'color': '#9e9e9e' } } ] } } ``` 通过以上步骤,您可以在uniapp微信小程序中模拟自定义地图样式

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值