小程序开发-开发入门总结

1. 注意点

  • App() 必须在 app.js 中注册,且不能注册多个。
  • 编译后的代码包大小需小于 1MB,否则代码包将上传失败。
  • 每个页面需要手动在app.json中进行注册,否则不能访问。
  • app.json中pages数组的第一项代表小程序的初始页面,小程序中新增/减少页面,都需要对 pages 数组进行修改。
  • 直接修改 this.data无效,无法改变页面的状态,还会造成数据不一致。
  • 单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。
  • 不要尝试修改页面栈,会导致路由以及页面状态错误。
  • tabBar只能配置最少2个、最多5个,tab 按数组的顺序排序。
  • 小程序页面只能同时打开 5 个,如果交互流程较长难以支持。
  • 同时只能存在 5 个url请求。
  • 无法跳转小程序以外的url。
  • 没有cookie。
  • 没有开放加载web页面
  • 没有a标签链接,不可嵌套iframe
  • 没有window变量,但微信提供了wx全局方法集
  • 事件绑定和条件渲染类似Angular,全部写在WXML中

2. 组成

由app.js、app.json、app.wxss三个文件组成,放在根目录

  • app.json是小程序的全局配置
"pages": [ //设置页面的路径
  "pages/index/index", //不需要写index.wxml,index.js,index,wxss,框架会自动寻找并整合
  "pages/logs/logs"
],
"window": { //设置默认窗口的表现形式
  "navigationBarBackgroundColor": "#ffffff", //顶部导航栏背景色
  "navigationBarTextStyle": "black", //顶部导航文字的颜色 black/white
  "navigationBarTitleText": "微信接口功能演示", //顶部导航的显示文字
  "backgroundColor": "#eeeeee", //窗口的背景色
  "backgroundTextStyle": "light", //下拉背景字体、loading 图的样式,仅支持 dark/light
  "enablePullDownRefresh": "false", //是否支持下拉刷新 ,不支持的话就直接不写!
  "disableScroll": true, //  设置true不能上下滚动,true/false,注意!只能在 page.json 中有效,无法在 app.json 中设置该项。
},
"tabBar": { //底部tab或者顶部tab的表现,是个数组,最少配置2个,最多5个
  "list": [{ //设置tab的属性,最少2个,最多5个
    "pagePath": "pages/index/index", //点击底部 tab 跳转的路径
    "text": "首页", //tab 按钮上的文字
    "iconPath": "../img/a.png", //tab图片的路径
    "selectedIconPath": "../img/a.png" //tab 在当前页,也就是选中状态的路径
  }, {
    "pagePath": "pages/logs/logs",
    "text": "日志"
  }],
  "color": "red", //tab 的字体颜色
  "selectedColor": "#673ab7", //当前页 tab 的颜色,也就是选中页的
  "backgroundColor": "#2196f3", //tab 的背景色
  "borderStyle": "white", //边框的颜色 black/white
  "position": "bottom" //tab处于窗口的位置 top/bottom
  },
"networkTimeout": { //默认都是 60000 秒一分钟
    "request": 10000, //请求网络超时时间 10000 秒
    "downloadFile": 10000, //链接服务器超时时间 10000 秒
      "uploadFile": "10000", //上传图片 10000 秒
    "downloadFile": "10000" //下载图片超时时间 10000 秒
  },
"debug": true //项目上线后,建议关闭此项,或者不写此项
  • app.wxss 是小程序的公共样式表,可以在其他.wxss文件中直接使用

pages文件夹里是小程序的各个页面,每个界面一般都由.wxml、.wxss、.js、.json四个文件组成,四个文件必须是相同的名字和路径

  • js 是页面的脚本代码,通过Page()函数注册页面。可以指定页面的初始数据、生命周期、事件处理等
  • wxml 是页面的布局文件,只能使用微信定义的组件
  • wxss 是样式表,需要注意
    尺寸单位:rpx 可以根据屏幕的宽带进行自适应
    样式导入:@import导入外联样式表,如:@import "test.wxss";
    定义在app.wxss中的全局样式,作用于每个页面。定义在page的.wxss文件只作用于对应的页面,会覆盖app.wxss中相同的选择器
  • json 是页面的配置文件,只能设置app.json中的window配置内容,会覆盖app.json中window的相同配置项,即使不配置任何东西也需要写{},否则会报错

3. 小程序生命周期

App生命周期

  • 用户首次打开小程序,触发 onLaunch(全局只触发一次)。
  • 小程序初始化完成后,触发onShow方法,监听小程序显示。
  • 小程序从前台进入后台,触发 onHide方法。
  • 小程序从后台进入前台显示,触发 onShow方法。
  • 小程序后台运行一定时间,或系统资源占用过高,会被销毁。
  • 小程序出错,触发onError

前台、后台定义: 当用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是进入了后台。当再次进入微信或再次打开小程序,又会从后台进入前台

Page页面生命周期

  • 小程序注册完成后,加载页面,触发onLoad方法。
  • 页面载入后触发onShow方法,显示页面。
  • 首次显示页面,会触发onReady方法,渲染页面元素和样式,一个页面只会调用一次。
  • 当小程序后台运行或跳转到其他页面时,触发onHide方法。
  • 当小程序有后台进入到前台运行或重新进入页面时,触发onShow方法。
  • 当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack(),触发onUnload

4. 小程序限制

4.1 程序限制
  • 脚本内不能使用window等对象
  • zepto/jquery 会使用到window对象和document对象,所以无法使用。
  • 样式表不支持级联选择器
  • 本地资源无法通过 css 获取 background-image可以使用网络图片,或者 base64,或者使用标签
4.2 数量限制
  • 底部或顶部可以添加tab按钮区域 tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab按数组的顺序排序。
  • 一个应用同时只能打开5个页面
  • 小程序的wx.request请求最开始最大并发数是5个,后来,估计随着用小程序的越来越多,总之,就是增加到了10个
4.3 大小限制
  • tabBar 上面的按钮 iconPath 图片路径,icon大小限制为40kb
  • tabBar 上面的按钮 selectedIconPath选中时的图片路径,icon 大小限制为40kb
  • setData 页面传递数据单次设置的数据不能超过1024kB
  • setStorage 本地缓存最大为10MB
  • 小程序源码打包后的大小限制为1M

页面跳转

  • 跳转接口有三个,分别是wx.redirectTowx.navigateTowx.switchTab
  • 如果某页面设置为tab页,则只支持wx.switchTab,不支持其他两种路由方式访问
原文地址:https://www.cnblogs.com/limaostudio/p/13632305.html