微信小程序（基本操作）

概念：

小程序：就是小程序，mini program。现在市面上有微信小程序，百度智能小程序等等。

微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。也体现了“用完即走”的理念，用户不用担心是否安装太多应用的问题。应用将无处不在，随时可用，且又无需安装卸载。

全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。小程序、订阅号、服务号、企业号是并行的体系。

微信小程序的优势及适用场景。

1) 开发角度：

a. 程序框架本身所具有的快速加载和快速渲染能力，加之配套的云能力、运维能力和数据汇总能力，使得开发者不需要去处理琐碎的工作，可以把精力放置在具体的业务逻辑的开发上。

b. 小程序的模式使得微信可以开放更多的数据，开发者可以获取到用户的一些基本信息，甚至能够获取微信群的一些信息，使得小程序的开放能力变得更加强大

c. 运行速度远远高于移动端网页，几乎可与手机APP媲美

d. 项目搭建迅速，适合快速构建需求

e. 短小精悍， 每个app源代码不会超过2MB

f. 无需下载安装，直接使用，触手可及！

g. 小程序整合了所学习的知识

2) 商业角度：

微信小程序的优势可以说至今没有任何软件可以比拟的，将成为商家的一个新营销战场，谁先进入这个战场谁的流量优势就大，更何况它还能给我们提供八大功能。

a. 流量来源多样化：目前小程序入口已经到四十多个，二维码、附近小程序、分享小程序等，流量多种多样。用户可以通过多种多样的方式进入小程序，而微信用户中包括城市用户、农村用户等各种用户群体，用户渗透率特别高，小程序无需担心流量。

b. 利用社交关系传播：店铺里的群体可以将客户导入到微信，利用信任、偏见建立传播聚合等方式，通过尽可能多加好友来进行传播，可以利用个人关系的传播，还可利用网红进行传播，例如生活中常见的好友国外代购以及网红直播卖面膜等等都是社交电商。

c. 搜索广告与公众号嵌入：微信小程序功能的开放与公众号的结合更紧密，高质量的内容+小程序会为商家带来更多的订单量。

准备工作

注册小程序帐号

① 准备一个微信号（你如果还没有微信号，你out了，你是穿越来的吧）

② 申请小程序账号：小程序

获取开发密钥（appId）

在做项目时需要密钥

公众平台登录小程序->开发->开发管理->开发设置->AppID(小程序ID) wx1481c0459dc80dab

安装开发工具

开发工具，可以选择自己喜欢的，也可以选择微信工具，下载微信开发工具，微信开发工具可完成开发，调试，打包，部署的工作

目录结构

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

默认的目录结构：

1、全局文件

app开头的文件名是全局文件（文件名不能改），包括app.js、app.json、app.wxss。

app.js：是全局的js文件，里面的变量可以在任何地方使用。

app.json：是对小程序的全局配置。

app.wxss：是全局样式。

2、页面级文件（pages文件夹下）

如：pages/index下。index.js、index.json、index.wxml、index.wxss。这四个文件名必须一样。

index.js：页面js文件，启动后需要先执行【必须有】

index.json：页面配置文件。只能配置窗口项。决定当前窗口表现

index.wxml：页面布局文件，相当于html 【必须有】

index.wxss：页面样式文件。当index.wxss里的样式和全局的app.wxss的样式冲突时，以index.wxss为准。

文件类型

.wxml, .wxss, .json, .js 文件的作用

① WXML（WeiXin Markup Language）文件

wxml模板：跟网页中的html是完成同样的功能。

wxml和HTML的不同之处

A. 标签名不同: wxml把常用的标签进行了封装，如：地图()等等

B. 采用mvvm的模式（如同react和vue一样），js中不直接操作DOM，只操作数据，所以，wxml中就出现了类似于vue中的指令：如：wx:if等

② WXSS文件

和网页开发中的css一样，但是进行了扩展.

wxss在css的基础上扩展了哪些？

1、新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。

2、提供了全局的样式和局部样式，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

3、此外 WXSS 仅支持部分 CSS 选择器，详细参考：WXSS | 微信开放文档

③ JS文件

JS文件不用解释，就是我们的js文件，完成交互的。

④ JSON文件

配置文件：

App.json：是小程序配置：

小程序代码构成 | 微信开放文档

project.config.json：工具配置

page.json：页面配置

开发文档

框架 组件 API

框架（mina框架）

微信客户端给小程序所提供的环境为宿主环境，小程序的运行环境分成渲染层(webview)和逻辑层(jscore)，WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层,小程序的渲染层和逻辑层分别由2个线程管理，这两个线程的通信会经由微信客户端

配置

全局配置

全局配置 | 微信开放文档

app.json，对微信小程序进行全局配置(页面管理，窗口设置，网络请求)

页面配置

页面配置 | 微信开放文档

pagename.json，对本页面的窗口表现进行配置，覆盖全局

项目环境配置

sitemap.json，project.config.json

1）、project.config.json是项目开发环境配置， 包括版本、依赖、程序名之类 。

2）、sitemap.json： 配置小程序内的搜索， 当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引 。 用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时，会携带特定的 user-agent：mpcrawler 及场景值：1129 。

如果想全局禁用索引，配置project.config.json，在 setting内部添加checkSiteMap:false,

wxml（官方组件)

视图容器 | 微信开放文档

1、视图容器（View Container） view 视图容器 scroll-view 可滚动视图容器 swiper 可滑动的视频容器

2、基础内容（Basic Content）

icon 图标 ​ text 文字 ​ progress 进度条

3、表单组件（Form）

form 表单

button 按钮 ​ input 输入框 ​ checkbox 多项选择器 ​ radio 单项选择器 ​ picker 列表选择器 ​ slider 滑动选择器 ​ switch 开关选择器 ​ label 标签

4、操作反馈组件（Interaction）

action-sheet 上拉菜单 ​ modal 模态弹框 ​ toast 短通知

5、导航（Navigation）

navigator 应用内跳转

6、多媒体（Media）

audio 音频 ​ image 图片 ​ video 视频

7、地图（Map）

map 地图

wxss（样式）

WXSS | 微信开放文档

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

和CSS 相比，WXSS 扩展的特性有：

尺寸单位

样式导入

1、WXSS尺寸单位

rpx尺寸单位可以根据屏幕宽度进行自适应。

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准

如：

ss

bb

2、WXSS样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

3、WXSS内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

4、WXSS选择器

目前支持的选择器有：

5、WXSS全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于所有页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

js（逻辑）

App()和page()

App()是注册小程序的，Page() 是注册页面的，都接受一个 Object 参数，App() 必须在 app.js 中调用，Page()必须出现在页面.js中，必须调用且只能调用一次，都会给当前注册生命周期钩子，和实例成员(方法、属性)

Object 参数

• data:{} 数据

• 钩子函数(参数){this 指向当前页面，当前小程序}

• 自定义函数(){ this 指向当前页面，当前小程序 }

• 自定义属性:值

  页面与主程通讯

  pages里面 let app=getApp(), app.实例属性|方法

  数据绑定

  WXML 中的动态数据均来自对应 Page 的 data。

  在WXML里使用双花括号即可。双括号里可以写变量，表达式（包括三元表达式）

  1、组件内容绑定使用（双花括号）将变量包起来

  2、组件属性(需要在双引号之内，并写上双花括号)

  列表渲染

  1）、wx:for 指令完成列表渲染。

  格式：wx:for="{{数组}}"

  默认数组的当前项的下标变量名默认为 index，当前项的变量名默认为 item

  如：