微信小程序开发 01

一.开发准备

1.在微信公众平台注册登录,绑定开发者,只有绑定的开发者才能使用开发者工具编辑小程序,一个小程序最多可以绑定20个开发者。
添加开发者后,需要获取APPID,只有填写了APPID的项目才能通过手机微信扫码进行真机测试。

2.下载微信开发者工具

二.新建/导入项目

三.项目目录结构

├── app.js     # 小程序的逻辑文件
├── app.json   # 小程序的配置文件
├── app.wxss   # 全局公共样式文件
├── pages      # 存放小程序的各个页面
│   ├── index  # index页面
│   │   ├── index.js     # 页面逻辑
│   │   ├── index.wxml   # 页面结构
│   │   └── index.wxss   # 页面样式表
│   └── logs   # logs页面
│       ├── logs.js      # 页面逻辑
│       ├── logs.json    # 页面配置
│       ├── logs.wxml    # 页面结构
│       └── logs.wxss    # 页面样式表
└── utils
    └── util.js

//根目录下有3个小程序必须有的3个app文件:app.js、app.json、app.wxss,这3个是应用程序级别的文件,与之平齐的还有一个pages文件夹,用来存放小程序的各个页面。

1.app.js、app.json、app.wxss,这三个中前两个是必看的,前两个相当于目录,就好比你读一本书,都要先看一下目录,所以以后看别人项目的时候,首先先看app.js和app.json

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

​ 3.app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释
app.json包含两部分pages和window,pages就是整个小程序包含的页面,可以根据路径查找到对应的页面,window就是设置一些窗口样式,依次是配置小程序的窗口 背景字体样式,配置导航条背景样式,配置默认标题,及颜色

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

5.小程序视图层WXML、MXSS,逻辑层JS

四.框架解析

1.使用 JSON 技术来表现应用的配置信息。包含应用的基本信息,页面配置和路由,应用全体的信息等。
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它基于 ECMAScript(W3C 制定的 JavaScript 规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

2.使用经过定制 CSS+XML 技术来实现视图层的描述。画面元素,例如列表、按钮、文本框、选择框等都通过 XML 语言来描述,遵从 XML 语法,对于页面的共同风格,使用 CSS 进行定义。
XML(Extensible Markup Language),中文名为可扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言。
在电子计算机中,标记指计算机所能理解的信息符号,通过此种标记,计算机之间可以处理包含各种的信息,比如文章等。它可以用来标记数据、定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言。它非常适合万维网传输,提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。是 Internet 环境中跨平台的、依赖于内容的技术,也是当今处理分布式结构信息的有效工具。早在1998年,W3C 就发布了 XML1.0 规范,使用它来简化 Internet 的文档信息传输。

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

3.使用 JavaScript 语言来实现逻辑层结构。包括用户操作的处理,系统 API 的调用等。
JavaScript 一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。
在1995年时,由 Netscape 公司的 Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为 Netscape 与 Sun 合作,Netscape 管理层希望它外观看起来像 Java,因此取名为 JavaScript。但实际上它的语法风格与 Self 及 Scheme 较为接近。
为了取得技术优势,微软推出了 JScript,CEnvi 推出 ScriptEase,与 JavaScript 同样可在浏览器上运行。为了统一规格,再加上 JavaScript 兼容于 ECMA 标准,因此也称为 ECMAScript。

五.App.json-pages讲解和如何新增加程序页面

1.pages用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径+文件名 信息。文件名不需要写文件后缀,框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

2.数组的第一项代表小程序的初始页面(首页)。小程序中新增/减少页面,都需要对 pages 数组进行修改
如开发目录如上图,则在app.json中写
{
“pages”: [“pages/index/index”, “pages/logs/logs”]
}

3.每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置
页面的.json只能设置 window 相关配置项的内容,以决定本页面的窗口表现,所以无需写 window 这个属性。
页面中配置项会覆盖 app.json 的 window 中相同的配置项。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值