微信小程序的开发及使用（一）

微信小程序

1、移动端开发的形式

C/S client/server 客户端和服务端 提前下载客户端 比如：淘宝移动端App、王者荣耀

B/S bowser/server 浏览器和服务端 通过浏览器输入网址打开使用 比如：移动端网页、页游

 

原生开发 NativeApp IOS[object-c和swift]和Andriod[java、kotlin] 使用体验最好 功能全 开发周期较长 需要学习新的开发语言和技术栈

web开发 WebApp 网页 通过浏览器打开 HTML+CSS+Javascript 使用体验差 开发周期短 快速开发 基于HTML5调用实现一些定位等手机功能

混合开发 HybirdApp 基于web技术栈，通过PhoneBridge桥接的方式 可以调用手机功能，并且拥有web快速开发的便捷性 Dcloud公司 uniapp基于vuejs ReactNative APICloud Ionic

问：微信小程序 它属于C/S还是B/S？ 根据使用过程描述

2、微信小程序

小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。

微信开放文档

微信账号分类：

3、开发工具

微信小程序开发，需要安装微信开发者工具使用特定语法进行开发

微信开发者工具下载地址与更新日志 | 微信开放文档

二、微信小程序

1、开发者工具安装

安装过程没有什么其他特殊选择，注意安装的盘符大小合适就可以。

安装开发者工具，打开软件后的效果

使用自己的微信账号进行扫描登录，需要在手机端确认登录

 

2、生成项目包

 

 

 

3、项目包目录结构

在微信小程序开发过程中，需要使用到wxml定义结构和内容，wxss定义修饰样式，jsjavascript实现业务逻辑

1. .json 后缀的 JSON 配置文件

2. .wxml 后缀的 WXML 模板文件

3. .wxss 后缀的 WXSS 样式文件

4. .js 后缀的 JS 脚本逻辑文件

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

文件	必填	作用
app.js	是	小程序逻辑-小程序入口文件
app.json	是	小程序公共配置文件
app.wxss	否	小程序公共样式表

一个小程序page页面由四个文件组成，分别是：

文件类型	必填	作用
js	是	页面逻辑
wxml	是	页面结构
wxss	否	页面样式表
json	否	页面配置

4、配置文件

参考网址：全局配置 | 微信开放文档

app.json文件用来对微信小程序进行全局配置的，设置小程序页面数量、窗口表现、设置底部或顶部菜单、网络请求超时时间等。

app.json由于是json文件，所以其中不能添加任何注释，key和value字符串必须用双引号引起来，数组或对象最后一定不能有逗号。

常用的全局配置：

• debug：debug调试是否开启

• pages：注册小程序的页面路径列表

数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改。

• window：全局的默认窗口表现

用于设置小程序的状态栏、导航条、标题、窗口背景色

• tabBar：小程序底部或顶部菜单定义（换句话说，小程序的菜单是通过json配置来实现的）

• networkTimeout：小程序网络请求超时时间设置

• usingComponents：自定义组件配置

全局配置文档：全局配置 | 微信开放文档