《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 的基础上,我们做了一些修改,以方便地开发小程序。
1)注册程序
App()
函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。
2)注册页面
Page()
函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。
3)模块化
(1)文件作用域
在 JavaScript 文件中声明的变量和函数只在该文件中有效;不同的文件中可以声明相同名字的变量和函数,不会互相影响。
通过全局函数 getApp()
可以获取全局的应用实例,如果需要全局的数据可以在 App()
中设置。
(2)模块化
我们可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports
或者 exports
才能对外暴露接口。
3. 视图层
《OD学微信开发》微信小程序入门示例的更多相关文章
- 微信小程序入门与实战 常用组件API开发技巧项目实战*全
第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...
- 微信小程序入门与实战 从0到1进行细致讲解 涵盖小程序开发核心技能下载
第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...
- 开发微信小程序入门教程,含破解工具
2016年09月21日晚 微信发不了微信“小程序”的内测版,一时间整个互联网都炸了锅.个大新闻.论坛都在讨论这个事情. 作为互联网的一猿,我们怎能不紧跟时代的脚步.于是第二天上午也对微信发布的“小程序 ...
- 天河微信小程序入门《四》:融会贯通,form表单提交数据库
天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数 ...
- 天河微信小程序入门《三》:打通任督二脉,前后台互通
原文链接:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=505&extra=page%3D1 天河君在申请到https ...
- 天河微信小程序入门:阿里云tomcat免费配置https
天河君在第一时间通过了微信小程序验证,开启了我的微信小程序之旅.因为天河君之前是一名后端狗,对前端不是很了解,所以几乎可以认为是从零开始学做微信小程序.也希望有志在微信小程序方向做点事情的朋友能够和我 ...
- 微信小程序入门正确姿势(一)
[未经作者本人同意,请勿以任何形式转载] >>>前言 这是 [认真学编程] 系列的 第4篇 文章(微信小程序入门系列),欢迎点赞分享.写留言,这些都是对我最好的支持. 本系列适合有一 ...
- 微信小程序入门案例
本文通过具体的实例记录微信小程序的入门知识. 1.特点 不需要安装 依赖微信应用 更接近原生APP 丰富的框架及API可达到快速开发的目的 2.工具使用 在开发的过程中可以使用微信开发者工具,更加直观 ...
- 微信小程序 | 49,小程序入门集锦系列文章20篇
以下20篇文章,都是关于微信小程序的文章,以入门常见问题为主.如发现谬误,请与笔者联系. [小程序入门集锦]1,微信小程序在哪里打开 [小程序入门集锦]2,小程序商店 [小程序入门集锦]3,微信小程序 ...
随机推荐
- Linux课程---8、Linux启动流程
Linux课程---8.Linux启动流程 一.总结 一句话总结: grub启动引导界面(比如装了多系统,选择系统),找到linux内核 启动init程序,加载各种驱动 1.进入grub界面选择相应的 ...
- ibatis的resultClass与resultMap 的区别
ibatis的resultClass与resultMap还是有很大的区别.以下是我碰到的一个问题. 配置文件写法如下: 1 sqlMap2 typeAlias alias="notice&q ...
- django 实现分页功能
分页效果: 视图代码: # -*- coding: utf-8 -*- from django.shortcuts import render,get_object_or_404 from djang ...
- [深入学习C#]C#实现多线程的方法:线程(Thread类)和线程池(ThreadPool)
简介 使用线程的主要原因:应用程序中一些操作需要消耗一定的时间,比如对文件.数据库.网络的访问等等,而我们不希望用户一直等待到操作结束,而是在此同时可以进行一些其他的操作. 这就可以使用线程来实现. ...
- Pyton基础-base64加解密
base64加密后是可逆的,所以url中传输参数一般用base64加密 import base64 s='username=lanxia&username2=zdd' new_s=base64 ...
- 数据库ACID和mvcc
一.数据库的ACID性: 原子性(atomicity).一致性(consistency).隔离性(isolation).持久性(durability). 二.原子性 1.原子性:一个事务要么全部完成, ...
- PS 滤镜——(扭曲)逆球面化 (凹陷效果)
%%% Inverse_Spherize %%% 逆球面化 clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Proce ...
- 【leetcode刷题笔记】Plus One
Given a non-negative number represented as an array of digits, plus one to the number. The digits ar ...
- resin启动时报错com.caucho.config.LineConfigException的解决
resin启动时报以下错误: [13:32:10.120] {main} WEB-INF/web.xml:42: 'listener-class' is an unknown property of ...
- django models class 不识别问题解决方案
目录 1. 事情起因 2. 排查经过 3. 总结 1. 事情起因 今天在写代码的时候,在django 的models目录中新增了一个pkg.py文件,里面定义了一个class, 在执行 makemig ...