zoukankan      html  css  js  c++  java
  • 《OD学微信开发》微信小程序入门示例

    官网地址:

    https://mp.weixin.qq.com/debug/wxadoc/dev/

    一、文件结构

    小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

    .js后缀的是脚本文件

    .json后缀的文件是配置文件

    .wxss后缀的是样式表文件

    wxopen-002

    一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:

    1. app.js

    app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。

    想了解更多可用 API,可参考 API 文档

    2. app.json

    app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。

    更多可配置项可参考配置详解

    3. app.wxss

    app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

    4. utils

    5. images

    6. pages

    在这个教程里,我们有两个页面,index 页面和 logs 页面,即欢迎页和小程序启动日志的展示页,他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。

    每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。

    .js后缀的文件是脚本文件,

    .json后缀的文件是配置文件,

    .wxss后缀的是样式表文件,

    .wxml后缀的文件是页面结构文件。

    1)index.js

    index.js 是页面的脚本文件,在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。

    2)index.json

    index.json 是页面的配置文件。

    页面的样式表是非必要的。当有页面样式表时,页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。

    3)index.wxml

    index.wxml 是页面的结构文件。

    4)index.wxss

    index.wxss 是页面的样式表。

    二、框架

    1. 配置

    https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

    2. 逻辑层

    逻辑层(App Service)

    小程序开发框架的逻辑层是由JavaScript编写。

    逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。 在 JavaScript 的基础上,我们做了一些修改,以方便地开发小程序。

    • 增加 App 和 Page 方法,进行程序和页面的注册。
    • 增加 getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。
    • 提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。
    • 每个页面有独立的作用域,并提供模块化能力。
    • 由于框架并非运行在浏览器中,所以 JavaScript 在 web 中一些能力都无法使用,如 document,window 等。
    • 开发者写的所有代码最终将会打包成一份 JavaScript,并在小程序启动的时候运行,直到小程序销毁。类似 ServiceWorker,所以逻辑层也称之为 App Service。

    1)注册程序

    App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。

    2)注册页面

    Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。

    3)模块化

    (1)文件作用域

    在 JavaScript 文件中声明的变量和函数只在该文件中有效;不同的文件中可以声明相同名字的变量和函数,不会互相影响。

    通过全局函数 getApp() 可以获取全局的应用实例,如果需要全局的数据可以在 App() 中设置。

    (2)模块化

    我们可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

    3. 视图层

  • 相关阅读:
    数据结构 【实验 串的基本操作】
    Ioc容器依赖注入-Spring 源码系列(2)
    定时任务管理中心(dubbo+spring)-我们到底能走多远系列47
    jvm内存增长问题排查简例
    Ioc容器beanDefinition-Spring 源码系列(1)
    SPI机制
    java工厂-积木系列
    java单例-积木系列
    利用spring AOP 和注解实现方法中查cache-我们到底能走多远系列(46)
    java 静态代理-积木系列
  • 原文地址:https://www.cnblogs.com/yeahwell/p/6296305.html
Copyright © 2011-2022 走看看