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. 视图层

  • 相关阅读:
    Codeforces 1291 Round #616 (Div. 2) B
    总结
    刷新DNS解析缓存+追踪+域名解析命令
    数学--数论--Hdu 5793 A Boring Question (打表+逆元)
    Lucene.net(4.8.0) 学习问题记录六:Lucene 的索引系统和搜索过程分析
    LeetCode 117 Populating Next Right Pointers in Each Node II
    LeetCode 116 Populating Next Right Pointers in Each Node
    test test
    LeetCode 115 Distinct Subsequences
    LeetCode 114. Flatten Binary Tree to Linked List
  • 原文地址:https://www.cnblogs.com/yeahwell/p/6296305.html
Copyright © 2011-2022 走看看