功夫码

小程序开发常见问题

西海岸看日出 时间:2019-04-20 11:17:45 阅读:79
--------------------------------------------------------- Ta 只分享的内容开始 ---------------------------------------------------------------------

1. 小程序的数据接口地址:必须是https打头的,但是开发阶段可以选择不验证域名的这个信息!

2. 小程序生命周期的函数内部对象要就改成var that=this;防止被替换。

3. view不识别\n但是text可以。

4. 没有dom,绑定数据,控制显示和隐藏全部用data来修改,就是this.setData({}),不过一般我们都写成that.

5. 微信小程序中原生组件层级最高,比如map,canvas,swiper,只能使用cover-view,cover-image,其中cover-view很垃圾很多样式都不支持,而且支持点击事件bindtap,还有各种bug,建议cover-view简单使用就可以了,千万别想着在原生组件上使用炫酷的效果说多了都是泪。(问题引用:当使用display:none;做隐藏的时候,其内容文字会出现在屏幕右上角,建议使用 wx:if="false"或position:absolute;left:-1000rpx;这种方式做隐藏。2、border不支持单边。3、不支持padding的使用,在安卓端会出现padding消失的问题。)

6. 动画问题(看帖子发现的之前不知道为什么):在小程序中当有两个元素同时发生变化时,会出现冲突,导致其中一个变化,而另一个不做变化,所以要使用setTimeout方法避免元素同时出现变化。

7. js执行顺序(看帖子发现的之前不知道为什么):在开发者工具中执行先执行aap.js然后执行其他js文件,但在手机上app.js和其他js是同时执行的;

8. 很多原生组件都有定高,只能使用微信提供的rpx来修改!

9. 小程序是单向绑定和vue不同,修改数据只能从setData来修改

10. 本地资源无法通过 css 获取,只能通过网络或者使用image标签

11. cover-view放弃padding, 用min-width + text-align + height + line-height

12. js方法扩展公共模块 util.js

公共模块方法需要通过 module.exports 对外暴露接口,使用的时候需要利用 require(path),将文件引入。如:

function sayHello(name) {//公共方法util类
  console.log(`Hello ${name} !`)
}
module.exports.sayHello = sayHello//用module.exports 对外暴露接口


//先引入,公共方法在 util.js 里面

var util = require('../../utils/util.js')
Page({//调用类
  onLoad: function () {//  使用时,用 util 引用名调用,如:util.sayHello()
    util.sayHello('我是传的值');
  }
})


13.解决小程序弹出层滚动穿透问题

一:当弹出层里面无滚动的时候:

可以在遮罩的view标签上定义一个防止事件冒泡的方法:

<view catchtouchmove="preventD" >code-------</view>

在js文件写上这个即可
 preventD() {
    return
  }


二:当弹出层有滚动的时候

.noscroll {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  z-index: 0;
}


14.invoke event报错

这是我们新手常遇到的:

1.可能地址不正确,建议使用绝对路径比如:/pages/index/index

2.有可能错误的使用了跳转:

//跳转到新的页面,新的页面带有返回按钮,不能跳转到tabBar页面,否则会报invoke event之类的错误 
wx.navigateTo({
  url:"/pages/index/index" 
})

//关闭当前页,跳转到新的页面,但是不能太偶转到tabBar页面,否则会报invoke event错误
wx.redirectTo({
   url:"/pages/index/index" 
})

//跳转到tabBar页面,没有返回按钮
wx.switchTab({
  url:"/pages/index/index" 
})


--------------------------------------------------------- Ta 只分享了这些内容 ---------------------------------------------------------------------

本文来源:功夫码(gongfuma.com)
声明:本文系功夫码原创稿件,版权属[功夫码 gongfuma.com]所有。
未经授权不得转载,已经协议授权的媒体下载使用时须注明"稿件来源:功夫码",违者将依法追究责任。

相关文章

  • 回到顶部