微信小程序学习文档指南

 

一、开发前准备

1、开发工具下载。

2、微信小程序设计指南

3、首先要通读一遍官方文档,看看都有哪些东西,都能干什么。

 

二、目录结构

微信小程序学习文档指南_第1张图片

1、components 小程序自定组件 (组件生命周期,组件间通信与事件,数据监听器)

2、images 小程序内图片资源

3、miniprogram_npm  使用npm包安装的组件

4、pages  小程序页面文件夹放置微信小程序所有的小程序页面,每个小程序页面基本有.js  .json  .wxml  .wxss 四个文件组成

  • js:文件帮我们去处理微信小程序里面的逻辑和数据交互(数据双向绑定,获取界面上的节点信息)
  • json:文件帮我们配置微信小程序页面的一个配置信息
  • wxml:文件是用来帮我们展示我们小程序页面的元素和内容(数据绑定、列表渲染、条件渲染、模板、引用)
  • wxss:文件帮我们设置小程序页面元素的样式

5、utils  小程序公用类目录

6、app.js:注册小程序

7、app.json:文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

8、app.wxss:小程序公共样式表

 

三、开发详解系列

1、APP生命周期(app.js注册小程序,小程序运行机制)

//必须在 app.js 中调用,必须调用且只能调用一次。
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

2、页面生命周期和参数传递(生命周期,页面路由)

  • navigateToredirectTo 只能打开非 tabBar 页面。
  • switchTab 只能打开 tabBar 页面,路径后不能带参数
  • reLaunch 可以打开任意页面。
  • 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
  • 调用页面路由带的参数可以在目标页面的onLoad中获取。

3、事件

  • 冒泡事件(bind):当一个组件上的事件被触发后,该事件会向父节点传递。
  • 非冒泡事件(catch):当一个组件上的事件被触发后,该事件不会向父节点传递。
  • 互斥事件(mut-bind):如果事件冒泡到其他节点上,其他节点上的 mut-bind 绑定函数不会被触发,但 bind 绑定函数和 catch 绑定函数依旧会被触发。
  • 事件的捕获(capture-bindcapture-catch):触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前,且在捕获阶段中,事件到达节点的顺序与冒泡阶段恰好相反。

4、获取用户信息(小程序登录、UnionID 机制说明,获取手机号,头像昵称、位置、运动步数等授权)

5、发起 HTTPS 网络请求

wx.request({
  url: 'test.php', //仅为示例,并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})
  • 每个微信小程序需要事先设置通讯域名,小程序只可以跟指定的域名进行网络通信

  • 域名必须经过 ICP 备案

  • 域名只支持 https,域名不能使用 IP 地址在微信开发者工具中,可以临时开启 开发环境不校验请求域名、TLS版本及HTTPS证书 选项,跳过服务器域名的校验。此时,在微信开发者工具中及手机开启调试模式时,不会进行服务器域名的校验。

 

 四、Tip

1、setData接口的调用涉及逻辑层与渲染层间的线程通信,通信过于频繁可能导致处理队列阻塞,界面渲染不及时而导致卡顿,应避免无用的频繁调用。

  • 视图层绑定的变量使用this.setData({a:'1'}),同时this.data.a同步改变。
  • 要在页面渲染后执行的方法可以写在setData的回调方法中this.setData({a:'1'},()=>{ // Do something.})
  • setData操作会引起框架处理一些渲染界面相关的工作,一个未绑定的变量意味着与界面渲染无关,传入setData会造成不必要的性能消耗。

2、组件对应 wxss 文件的样式,只对组件wxml内的节点生效。

  • 继承样式,如 font 、 color ,会从组件外继承到组件内。
  • 组件和引用组件的页面不能使用id选择器(#a)、属性选择器([a])和标签名选择器,请改用class选择器。
  • 分包中不可使用其他分包资源,可使用主包资源;主包不可使用分包资源。
#a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点,否则不一定会生效 */

3、小程序分包,单个包最大2M,代码包总大小20M

 "pages": [ //主包页面配置
    "pages/index/index",
  ],
  "subpackages": [ // 配置分包
    {
      "root": "pages/activity", // 分包根目录
      "pages": [  // 分包页面
        "perInvite/index"  
      ]
    },
    {
      "root": "pages/subPages",
      "pages": [
        "camp/index"
      ]
    }
  ],
  • 分包中不可使用其他分包资源,可使用主包资源;主包不可使用分包资源。

你可能感兴趣的:(小程序,前端)