原生小程序开发注意事项总结

写在前面

原本是准备将小程序开发的过程和一些API进行总结记录一下，顺便将里面的坑给说明一下，不过查看了一下别人写的帖子和官方的文档，觉得我自己重复写没有什么意思，浪费自己的时间也浪费读者的时间，所以这篇文章主要针对小程序开发过程中容易出现的坑进行一个总结，我会从入口开始讲，尽可能的将小程序开发过程中可能出现的问题和坑都给说明一下，因为我参考的资料是《小程序、巧应用》这本书的第二版，所以和官网有一些出入的地方大家注意一下，感谢该书作者提供了一本很权威的书籍作为参考资料！

文章思路

文章会挨个罗列博主认为的坑，不管是大坑还是小坑，不管是bug还是注意事项，都会意义列举，每一个说明我都尽可能的实现一个Demo进行演示，除非该功能涉及到的功能比较复杂不适合一个Demo演示的，我会尽可能的说明白

适用人群

• Web前端开发
• 小程序开发
• vue开发
• js开发
• h5开发

注意事项1 - 初始页面设置

• 数组的第一项用于设定小程序的初始页面，也就是小程序的启动页,也就是想让那一个作为启动页，直接调整他在数组中的位置即可
• 小程序中新增/减少页面，都必须对pages数组进行相应的修改，不修改会直接编译不通过
• 文件名不需要写文件后缀，小程序自己会寻找路径对应的文件.json等

"pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],

注意事项2 - window配置

• backgroundTextStyle的值仅支持dark/light
• navigationBarTextStyle的值仅支持back/white

这里很多开发者喜欢使用RGB或者十六进制的值进行表示颜色，别的属性可以，上面两个不行

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "小程序开发注意事项演示",
    "navigationBarTextStyle":"black"
  },

注意事项3 - networkTimeout配置

• 这里不是必填项，可以不进行设置，如果不设置，那么默认使用的是操作系统内核或者遵循服务器WebServe的设定，单位是ms

 "networkTimeout": {
      "request": 3000,
      "connectSocket": 3000,
      "downloadFile": 3000,
      "uploadFile": 3000
  }

注意事项4 - page.json

• 优先级的问题，每一个原生wx小程序都有四个文件，其中一个是index.json文件，这个文件对应的windows配置就是app.json中的window，但是index.json里面只能配置window的属性，所以不用写window，他的优先级要高于app.json的window

//index.json 结构不同，优先级高于下方的app.json
{
  "navigationBarTitleText": "查看启动日志",
  "usingComponents": {}
}
//app.json 
 "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "小程序开发注意事项演示",
    "navigationBarTextStyle":"black"
  },

注意事项5 - 前台、后台、销毁

当前用户界面操作运行或者操作小程序的时候为前台、当用户点击左上角的关闭或者按了设备的Home键离开了微信，小程序这个时候并没有进行直接销毁，而是进入了后台，再次打开微信或者小程序的时候，又进入了前台 只有当小程序进入后台一段时间或者系统资源占用过高，才会真正的进行销毁，此时才代表小程序的生命周期结束（生命周期不理解的可以自行搜索了解）

注意事项6 - App()

• App()方法必须注册在app.js中，而且只可以注册一个
• 不要在定义App内的函数中调用getApp()，直接this就可以获取到App实例
• 通过getAPP()获取到实例之后，不要私自调用生命周期函数

//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"

注意事项7 - getCurrentPage()

• 不要是onLaunch操作的时候调用getCurrentPages()，因为此时的page还没有生成

//正确 会打印出当前页面一些信息
onReady() {
        let currPage = getCurrentPages()
        console.trace(currPage)
    },
//错误 他不会报错，但是会打印出一个[]
onLaunch() {
      console.log(getCurrentPages())
  }     

注意事项8 - 钩子函数说明

onLoad 页面加载的时候执行的初始化操作

• 一个页面只会调用一次
• 参数可以获取到wx.navigateTo和w x.redirectTo以及中的参数

onShow是页面显示的时候就会执行，也就是说每次打开都会调用

onReady 是页面初次渲染完成的时候执行的操作

• 一个页面只会调用一次，代表页面已经加载结束，可以和视图层进行交互
• 对页面进行setNavigationBarTitle设置

onHide是页面隐藏的时候执行的操作，navidateTo或者底部Tab切换的时候触发

onUnload页面写在的时候执行的操作，redirectTo或者navigateBack的时候调用

注意事项9 - onShareAppMessage

• 只有定义了这个事件处理函数，小程序的右上角菜单才会显示“分享按钮”,否则是不显示的

注意事项10 - globalData

• app.js 中的全局参数在不同的文件中是相互独立的，你可以在自己独立的文件中声明一个和app.js中变量名字相同的变量
• 全局属性中一个文件被更改了，这个全局属性的值就会被全局更改

//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

注意事项11 - wx函数命名

• wx.on开头的API一般都是监听某个事件发生的API接口，接受一个回调函数作为参数，当该事件触发的时候，回调函数就会执行
• wx.不带任何约定的的API（比如：wx.request）都是接受一个ONJECT作为参数
• OBJECT中可以指定success、fail、complete来接收接口的调用结果

注意事项12 - block

• 包装元素，只接受控制属性，不会在页面中做任何渲染，可以理解为template的用法，所以不要设置样式在上面

注意事项12 - wx:for

这里为什么单独拉出来说这遍历的事情呢？是因为他和我们常见的一些for循环有一些差别，所以导致很多人使用wx开发的时候直接写了但是发现值取不到，这里简单的记录一下，不要被语法给坑了

• wx:for-item:可以获取到指定数组当前元素的变量名
• wx:for-index:可以获取到指定数组当前下标的变量名

注意事项13 - 冒泡事件

什么是冒泡：当点击一个组件上的事件的时候，该事件向父节点传递的现象

• wx的冒泡事件只有六个

touchstart、touchmove、 touchcancel、touchend、tap、longtap

• touchstart ： 手指触摸
• touchmove: 手指触摸后移动
• touchcancel：手指触摸被打断（电话来电、弹窗等）
• touchend：手指触摸动作结束
• tap：手指触摸后离开
• longtap：手指触摸后，超过350ms再离开

bind事件绑定是不会阻止事件向上冒泡的，但是catch事件绑定可以阻止事件向上冒泡

canvas中的事件均不会出现冒泡事件

注意事项14 - wxss

• wxss本地资源是无法获取的，所以微信里面的样式都是用的网络图片或者base64
• @import 后面需要跟的是导入的外联样式的相对路径
• 部分选择器是不可以使用的

:disabled、:enabled、:checked、级联样式(wx觉得会破坏组件的结构)

注意事项15 - 设计稿尺寸

750是标准的设计稿，如果不是750的设计稿，需要进行一次换算，比如640的设计稿，需要进行1rpx = 640/750 但是因为wxss中不支持算数运算符，所以小程序的设计稿尽量使用750进行设计

注意事项16 - 框架组件

• 小程序的所有组件与属性都需要使用小写字符

注意事项17 - 组件默认值

• 小程序中image、video、canvas等默认的宽高都是300 * 225px的值

注意事项18 - wx标签

• text

这个标签单独拉出来说是以为他是唯一一个可以长按选中文本的标签，同时他的不支持相互嵌套

• image 他并不是严格意义上的image标签，也就是说他和我们html中的img不是同一个东西，你可以将它理解为一个view 的背景图，默认的设置为background-size：100% 100% 而已，所以他提供了12种可以调节的模式
• icon

    <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>

注意事项19 - API

• 小程序仅可以跟指定的域名进行网络通信，每一个小程序需要事先设置好通信域名
• 一个微信小程序，同时只能有5个网络请求连接
• 一个微信小程序只可以有一个websocket连接，如果当前已经存在了一个，会自动关闭该连接，创建一个新的websocket

注意事项20 - 缓存

• localStorage是永久存储到本地的，但是不建议将关键信息存储到本地，第一不安全，第二是用户一旦换设备，就无法获取

注释事项21 - getLocation

// 类型有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
            })
        }
})

注意事项21 - showActionSheet

• 打开菜单 - 只可以进行单一颜色的改变和使用**#000**这种色值进行设置 数组不要超过6个,不可以为Number类型

 wx.showActionSheet({
            itemList: ["a", "b", "c"],
            itemColor: "#f40",
            success: function (res) {
                console.log(res)
            }
  })
//itemList: ["a", "b", "c", "e", "f", "g", "h"],超过6个就不会显示了

注意事项22 - 页面跳转

wx.navigateTo可以使用wx.navigateBack() 进行返回
wx.redirectTo不可以使用wx.navigateBack() 进行返回 
wx.navigateTo和wx.redirectTo 不可以跳转到tabbar的页面
只能使用wx.switchTab跳转到tabBar

注意事项23 - 动画

<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)
    },

注意事项24 - 模板消息

• 支付成功中以后的模板消息一次支付只能下发一条，多次支付每次下发的内容是相互独立的
• 模板消息的标题必须是以“提醒”或者“通知”结尾
• 标题不可以有特殊符号
• 标题不可以是营销类的的：优惠券什么的

处罚说明

• 第一次违规 删除模板消息 警告
• 第二次违规 封禁接口7天
• 第三次违规 封禁接口30天
• 第四次违规 永久封禁

注意事项25 - 分享

• onShareAppMessage 只有页面定义了这个函数，右上角的分享功能才会显示
• 两种分享方式

 <button open-type='share'>分享</button>

右上角点击...进行分享

• onShareAppMessage返回的是一个object

onShareAppMessage(){
       return {
           title:"CSDN",
           desc:"这个页面可以直接到动画页面",
           path:"/pages/animation/index"
       }
    },

• 图片不可以自定义，会获取当前页面，从顶部开始，高度为百分之80屏幕宽度的图像作为分享图片
• 可以携带参数

注意事项26 - 取消自带的标题

这个忘记了，所以这里写一下

//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;
}

注意事项27 - 获取二维码API

• 通过获取二维码的接口仅可以获取到已经发布的小程序的二维码
• 可以在开发者工具的预览的时候生成开发版的带参的二维码
• 带参的二维码只有十万个 需要谨慎调用
• post传参数的时候需要专程json字符串，不支持form表单提交获取

注意事项28 - 发布审核常见的被拒绝的场景罗列

常见的官网有，下面罗列的都是一些大家不怎么注意的

• 不得将搜索小程序功能加入小程序
• 不可以要求用户降低手机操作系统的安全性，比如刷机、越狱等操作
• 如果有账户系统，必须存在退出操作
• 头像的logo需要使用透明的或者有色的背景，如果是白色的，需要添加上边框

写在后面

上面罗列了小程序开发过程中可能存在的一些坑和注意的点，也许还有很多我们没有踩到的，后面遇到了会及时的更新，上面内容中如果有写的不对地方，希望大家及时指正，鄙人感激不尽，另外就是文章篇幅相对来说不算太长，我这篇文章少配图，因为这样显的文章不那么冗杂，小程序开发本身是很简单的，所以没有什么特别的说明，只要将里面需要注意的点注意到了，基本上开发一个小程序是没有什么问题的，最后我想说的是我基于的版本是wx的原生版本的语法规则，uniapp的开发我前面的博客也有涉及，只是没有全面的讲过，因为我觉得那个需要vue的基础，只要会vue，会这个原生wx的开发，基本上是没有什么问题的，后续真的需要的话，我会写一篇关于uniapp开发遇到的一些注意事项的！希望大家早日熟悉小程序开发，永远不遇到BUG！

打完收工！拜拜了您