微信小程序

【微信官方公众平台】官网地址：https://mp.weixin.qq.com/

二

基于微信生态圈的程序

  1. 微信小程序与普通网页开发的区别

1-1 运行环境的不同

​ 网页 ： 基于浏览器

​ 微信小程序 ： 微信

1-2 API 不同

​ 网页： 基于DOM 对象，BOM 的API

​ 微信小程序： 自带的地理定位、支付 、 扫码

1-3 开发环境的不同

​ 网页 ： 浏览器 + 代码编辑器

​ 微信小程序 ： 1.申请小程序的开发账号

​ 2.安装微信开发者工具

​ 3.创建和配置小程序项目

小程序的官方接口：

微信小程序二维码接口

【微信官方公众平台】 ： 官网地址 ： https://mp.weixin.qq.com/

  1. 填写账号信息
  2. 邮箱激活
  3. 连接激活

​ 主体 【个人】 区分 【企业】 - 【个人】 — 不支持微信支付、微信认证、高级接口

三

  1. 获取小程序的APPID

  2. 安装开发者工具

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2-1 快速构建

2-2 代码查看编辑

2-3 代码调试与发布

四

一.项目结构

  1. pages: 用来存放所有小程序的页面

  2. utils: 用来存放工具性质的模块 （formattime）

  3. app.js : 小程序项目入口文件

  4. app.json : 全局配置文件

  5. app.wxss: 全局样式文件

  6. project.config.json: 项目配置文件

  7. sitemap.json : 用来配置小程序是否被其它小程序索引

二、小程序组成部分

单独文件夹存放、建议全部放在【page】文件夹下面

4部分组成：

  1. js脚本 : 存放数据、事件处理函数
  2. json : 页面配置文件
  3. .wxml : 页面排版
  4. wxss : 页面样式文件

三、JSON 配置文件的作用

所有的小程序都是以这种配置文件形式出现，通过这种JSON格式给小程序进行不同级别的配置

4种

app.json , project.config.json ,sitemap.json

每个页面自己的.json 配置文件

app.json ，全局变量，包括所有小程序页面路径、窗口外观、界面表现、底部tab等

  1. pages : 当前小程序所有页面路径

  2. window: 定义所有的背景色、文字颜色等

  3. style ： 样式版本

  4. sitemapLocation ： 指明 sitemap.json 路径

project.config.json

  1. settting : 保存编译相关的配置

  2. appid： 更新

sitemap.json

通过防爬虫机制

页面.json

本生支持的配置文件

七

一，新增小程序页面

只需要在app.json 下面 —- pages ： 新增页面的路径，开发工具会根据路径自动生成相应的文件夹

二、自定义首页

调整app.json pages 属性数组的页面路径顺序即可，首页默认为第一加载的路径，编译后进行渲染

三、什么是WXML

weixin Markup language 一套自定义的微信标签，用来构建小程序页面的结构

WXML 和 HTML 区别

WXML

  1. 标签名不同

​ HTML (div ， span ， img , a)

​ WXML (view , text , image , navigator )

  1. 属性节点的不同
    1
    2
    3
    ​<a href="#" >。。。

    ​<navigator  url="/pages/index/index" >
  2. 提供了类似VUE 中的模版语法

​ 3-1 数据绑定

​ 3-2 列表渲染

​ 3-3 条件渲染

WXSS 微信小程序自带的样式语言

WXSS 与CSS 的区别

  1. 新增了rpx 尺寸单位

    ​ CSS 需要手动进行像素单位换算 rem

    ​ WSXX 不同屏幕小程序会自动进行换算

  1. 提供全局样式和局部样式
  1. WXSS 里面的选择器

​ 只针对特别的选择器

​ .class 和 id

​ element 元素

​ :: after 和 ::before 伪类选择器

小程序中js 文件的分类

1-1 app.js

​ 整个入口文件，通过调用App函数来启动整个小程序

1-2 页面的.js 文件

​ 页面入口文件，通过Page函数来创建运行页面

1-3 普通的.js 文件

​ 就是普通的功能模块的文件，封装公共的函数或者属性供页面来调用

六、宿主环境 （就近原则）

每一个程序运行的时候，需要依赖一个环境

没有宿主环境就跑步起来

微信小程序必须依赖微信

比H5多的功能

微信扫码、微信的支付、微信登录、地理定位

通信的主题：

  1. 渲染层：

​ WXML 和 WXSS 就是我们的渲染层

  1. 逻辑层：

​ js 脚本 工作在逻辑层的

七、通信模型

与第三方交互的模式

八、小程序启动的过程

  1. 下载对应的小程序包

  2. 通过app.json全局配置文件解析项目

  3. 执行我们全局变量app.js 入口文件，调用APP（）创建小程序的实例

  4. 渲染小程序的首页

  5. 页面渲染完成

八

一、小程序组件的分类

视图容器：

​ 1-1 view

​ 视图区域

​ 类似div 块级元素

​ 常用实现页面的组件

​ 1-2 scroll - view

​ 可滚动的视图区域

​ 常用的实现滚动列表效果

​ 1-3 swiper 和 swiper-item

​ 轮播图容器组件和轮播图item

​

​