浅谈小程序

当时备课的时候写的提纲,有点乱,准备空了重新写一个……

微信小程序

是什么

  • 无需下载&卸载
    微信小程序是基于微信平台上进行工作的,即我们可以按照需求随时打开小程序或者关闭都是在微信平台内的。因此免去了下载占用手机的内存的情况。
  • 触手可及
    作为工具为开发初衷的微信平台,在开发微信小程序的同时仍旧引用了相同的理念,因此当有一些操作需要微信小程序的时候它便会按照需求弹出。
  • 用完即走
    一旦用户完成他的任务,他就应该去做其他的事情,与此同时小程序就不应该继续留存在当前页面之中。

开发相关

准备工作

  • 语言需求(基础)

    • HTML
    • CSS
    • javaScript
  • 开发环境需求

    • 微信开发者工具
    • 注册微信开发者账号
      (注:开发者账号非必须,如果只是使用平台进行学习微信小程序而不进行小程序上线的话可以直接在开发平台新建工程的时候使用测试号即可)

简单介绍框架

在实际运用的时候小程序里面是分别对HTML,CSS做了封装,以WSML,WXSS的形式展现,相关的语法基本相似,只是微信在这些语言的基础之上进行了一定的封装以及修改,方便开发者的使用

在整个工程之中,小程序分成逻辑层以及视图层这两个部分构成一个整体的数据绑定系统。
在视图层中使用一定的语法与逻辑层绑定,之后在逻辑层进行了改变之后相应的视图层也会进行一定的改变。

与此同时,基本上我们能够使用的组件官方都有所涉及,文档里面都有具体的解释以及运用示例
传送门

了解工程目录

默认工程目录

该图是新建工程之后的默认工程目录。

app为文件名的部分是整个项目里面的总体配置信息:

  • app.json
    利用json格式对整个工程进行描述。

    • "pages"
      利用数组的形式描述整个工程的页面信息,数组第一个为小程序进入后的第一个页面。
    • "window"
      主要描述该项目整体背景,导航栏等样式,如果某个文件夹中某个.json文件中有相同的描述,则会覆盖"window"中描述的信息。
  • app.wxss
    主要描述该项目整体的样式

  • app.js
    主要描述该项目全局逻辑,主要记录一些共有函数以及数据,需使用App()函数来注册一个小程序
    (类似于Android的生命周期函数以及全局变量/函数)

  • project.config.json
    项目配置文件

pages页描述整个小程序的页面信息,而每个子文件夹的内容都是对应的一个页面的信息。

以index页面为例:

  • index.js:描述index页面的逻辑信息(类比:js代码)
  • index.wxml:描述index页面的布局信息(类比:HTML页面布局)
  • index.wxss:描述index页面的布局的样式信息(类比:CSS信息)

小程序的生命周期

生命周期

tips

  • 每次代码修改了之后需要保存了之后才能观看效果
  • 页面跳转/样式引入/工具引用都需要相对路径
    其中./表示当前目录,例如./weui.wxss
    ../表示上级目录,例如../index/index
  • 网络请求需要https协议,不然调用wx.request()方法会报错
  • 每页中Page()函数外的变量不在页面的生命周期管理范畴内,直接进入缓存中,二次进入该页面会拿取缓存展示

资料推荐

善用文档 / 百度查询

  • 微信小程序官方教程&文档
    在官方的文档里面每个控件都给了相应的介绍,在之后也有示例代码的下载,不妨看懂了示例代码之后自己再上手一遍