原本是准备将小程序开发的过程和一些API进行总结记录一下,顺便将里面的坑给说明一下,不过查看了一下别人写的帖子和官方的文档,觉得我自己重复写没有什么意思,浪费自己的时间也浪费读者的时间,所以这篇文章主要针对小程序开发过程中容易出现的坑进行一个总结,我会从入口开始讲,尽可能的将小程序开发过程中可能出现的问题和坑都给说明一下,因为我参考的资料是《小程序、巧应用》这本书的第二版,所以和官网有一些出入的地方大家注意一下,感谢该书作者提供了一本很权威的书籍作为参考资料!
文章会挨个罗列博主认为的坑,不管是大坑还是小坑,不管是bug还是注意事项,都会意义列举,每一个说明我都尽可能的实现一个Demo进行演示,除非该功能涉及到的功能比较复杂不适合一个Demo演示的,我会尽可能的说明白
"pages":[
"pages/index/index",
"pages/logs/logs"
],
这里很多开发者喜欢使用RGB或者十六进制的值进行表示颜色,别的属性可以,上面两个不行
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "小程序开发注意事项演示",
"navigationBarTextStyle":"black"
},
"networkTimeout": {
"request": 3000,
"connectSocket": 3000,
"downloadFile": 3000,
"uploadFile": 3000
}
//index.json 结构不同,优先级高于下方的app.json
{
"navigationBarTitleText": "查看启动日志",
"usingComponents": {}
}
//app.json
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "小程序开发注意事项演示",
"navigationBarTextStyle":"black"
},
当前用户界面操作运行或者操作小程序的时候为前台、当用户点击左上角的关闭或者按了设备的Home键离开了微信,小程序这个时候并没有进行直接销毁,而是进入了后台,再次打开微信或者小程序的时候,又进入了前台 只有当小程序进入后台一段时间或者系统资源占用过高,才会真正的进行销毁,此时才代表小程序的生命周期结束(生命周期不理解的可以自行搜索了解)
//other.js
let instanceApp = getApp()
console.log(instanceApp) //获取到App实例
//app.js
globalData: {
userInfo: null,
testInfos: "this is csdn test infos"
}
onLaunch() {
console.table(this.globalData)
},
//打印结果:
Value
userInfo null
testInfos "this is csdn test infos"
//正确 会打印出当前页面一些信息
onReady() {
let currPage = getCurrentPages()
console.trace(currPage)
},
//错误 他不会报错,但是会打印出一个[]
onLaunch() {
console.log(getCurrentPages())
}
//index.js 首页
app.globalData.testInfos = "update testInfos"
console.log(app)
//输出结果
testInfos: "update testInfos"
userInfo: null
//mine.js 我的页面
console.log(app)
//输出结果
testInfos: "update testInfos"
userInfo: null
这里为什么单独拉出来说这遍历的事情呢?是因为他和我们常见的一些for循环有一些差别,所以导致很多人使用wx开发的时候直接写了但是发现值取不到,这里简单的记录一下,不要被语法给坑了
什么是冒泡:当点击一个组件上的事件的时候,该事件向父节点传递的现象
touchstart、touchmove、 touchcancel、touchend、tap、longtap
bind事件绑定是不会阻止事件向上冒泡的,但是catch事件绑定可以阻止事件向上冒泡
canvas中的事件均不会出现冒泡事件
:disabled、:enabled、:checked、级联样式(wx觉得会破坏组件的结构)
750是标准的设计稿,如果不是750的设计稿,需要进行一次换算,比如640的设计稿,需要进行1rpx = 640/750 但是因为wxss中不支持算数运算符,所以小程序的设计稿尽量使用750进行设计
这个标签单独拉出来说是以为他是唯一一个可以长按选中文本的标签,同时他的不支持相互嵌套
<icon type="success_no_circle"></icon>
<icon type="success"></icon>
<icon type="info"></icon>
<icon type="warn"></icon>
<icon type="waiting"></icon>
<icon type="cancel"></icon>
<icon type="download"></icon>
<icon type="search"></icon>
<icon type="clear"></icon>
// 类型有wgs84/gcj02
wx.getLocation({
type: "wgs84",
success: function (res) {
console.log(res)
}
})
// gcj02 返回的是wx.openLocation的经纬度 但是这里我使用wgs84 也可以 不清除具体的原因
//可以进行打开当前位置的地图
wx.getLocation({
type: "gcj02",
success: function (res) {
console.log(res)
wx.openLocation({
latitude:res.latitude,
longitude:res.longitude,
scale:28
})
}
})
wx.showActionSheet({
itemList: ["a", "b", "c"],
itemColor: "#f40",
success: function (res) {
console.log(res)
}
})
//itemList: ["a", "b", "c", "e", "f", "g", "h"],超过6个就不会显示了
wx.navigateTo可以使用wx.navigateBack() 进行返回
wx.redirectTo不可以使用wx.navigateBack() 进行返回
wx.navigateTo和wx.redirectTo 不可以跳转到tabbar的页面
只能使用wx.switchTab跳转到tabBar
<view animation="{{animationData}}" class="s-ani"></view>
<button bindtap="startAnimation" type="primary">开始动画</button>
/**
* 每一次的动画都需要进行export() 赋值给到页面绑定元素
* step 每一次的step前面可以是很多动画,animation.scale(2, 2).rotate(45).step()
* 但是会一次执行 如果想分开执行,就写两步进行
**/
startAnimation() {
let that = this
let animation = wx.createAnimation({
delay: 0,
duration: 1000,
timingFunction: 'ease'
})
this.animation = animation
animation.scale(2, 2).rotate(45).step()
this.setData({
animationData: animation.export()
})
setTimeout(()=>{
animation.translate(30).step()
that.setData({
animationData:animation.export()
})
},3000)
},
<button open-type='share'>分享</button>
右上角点击...进行分享
onShareAppMessage(){
return {
title:"CSDN",
desc:"这个页面可以直接到动画页面",
path:"/pages/animation/index"
}
},
这个忘记了,所以这里写一下
//index.json
{
"navigationStyle": "custom"
}
//然后自己设置一下背景图片就可以了
.container{
background-image: url(https://t7.baidu.com/it/u=2581522032,2615939966&fm=193&f=GIF);
background-size: 100% 100%;
height: 100vh;
}
常见的官网有,下面罗列的都是一些大家不怎么注意的
上面罗列了小程序开发过程中可能存在的一些坑和注意的点,也许还有很多我们没有踩到的,后面遇到了会及时的更新,上面内容中如果有写的不对地方,希望大家及时指正,鄙人感激不尽,另外就是文章篇幅相对来说不算太长,我这篇文章少配图,因为这样显的文章不那么冗杂,小程序开发本身是很简单的,所以没有什么特别的说明,只要将里面需要注意的点注意到了,基本上开发一个小程序是没有什么问题的,最后我想说的是我基于的版本是wx的原生版本的语法规则,uniapp的开发我前面的博客也有涉及,只是没有全面的讲过,因为我觉得那个需要vue的基础,只要会vue,会这个原生wx的开发,基本上是没有什么问题的,后续真的需要的话,我会写一篇关于uniapp开发遇到的一些注意事项的!希望大家早日熟悉小程序开发,永远不遇到BUG!
打完收工!拜拜了您