微信小程序开发

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

(1) 运行环境的不同

网页运行在浏览器汇总,小程序运行在微信环境中

(2) api不同

(3) 开发模式不同

2 小程序代码的构成-项目结构

(1) 目录结构

 (2) 页面的组成部分

 组件: 一个完整的前端功能的整体,页面(html),功能(script),样式(style)

(3) json配置文件

① app.json

  • page: 用来记录当前小程序所有页面的路径
  • windows: 全局定义小程序所有页面的背景色,文字颜色等
  • style: 全局定义小程序组件所使用的的样式版本(v2表示新版样式)
  • tabBar: 小程序的tabBar效果的配置
  • sitemapLocation: 用来指明sitemap.json的位置

② project.config.json(用来记录小程序开发工具所做的个性化配置)

  • setting: 保存了编译相关的配置(在设置中进行的设置会体现在setting中)

  • projectname 保存的是项目名称

  • appid: 保存的是小程序的账号 ID

  • checkSiteMap: 控制台sitemap警告

③ sitemap.json

微信现已开放小程序内搜索,效果类似于 PC 网页的 SEO sitemap.json 文件用来配置小程序
页面是否允许微信索引
当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索
关键字和页面的索引匹配成功的时候,小程序的页面将可能展示在搜索结果中。

④ 页面.json

小程序中的每一个页面,可以使用.json文件来对本页面的窗口外观进行配置,页面中的配置项会覆盖app.json的window中相同的配置项,不需要写window对象名,直接写

3 新增小程序页面

在app.json -> pages 中新增页面存放路径,小程序开发者工具可帮助我们自动创建对应的页面文件: 'pages/list/list',pages配置项的第一项作为首页显示

4 小程序代码的构成

4.1 WXML模板

(1) WXML和HTML的区别

标签名称不同

  • HTML(div, span, img, a)
  • WXML(view, text, image, navigator)

属性节点不同

  • <a href="#"></a>
  • <navigator url="/pages/home/home"></navigator>

提供了类似于Vue中的模板语法

  • 数据绑定
  • 列表渲染
  • 条件渲染

4.2 WXSS

新增了rpx尺寸单位

  • CSS中需要手动进行像素单位换算,例如rem
  • WXSS在底层支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动进行换算

提供了全局的样式和局部的样式

  • 项目根目录中的app.wxss会作用于所有小程序页面
  • 局部页面的wxss会作用域局部

WXSS仅支持部分CSS选择器

  • .class和#id
  • element
  • 并集选择器,后代选择器
  • ::after和::before等伪类选择器

4.3 小程序中的js逻辑交互

4.3.1 小程序中js文件的三大类

app.js

  • 是整个小程序项目的入口文件.,通过调用App()函数来启动整个小程序

页面的.js文件

  • 是页面的入口文件,通过调用 Page() 函数来创建并运行页面

普通的.js文件

  • 是普通的功能模块文件,用来封装公共的函数或属性供页面使用

5 小程序的宿主环境

宿主环境指的是程序运行所必须的依赖环境,例如安卓和ios系统是两个不同的宿主环境

手机微信是小程序的宿主环境

借助此宿主环境提供的能力,可以完成许多普通网页无法完成的功能

5.1 小程序宿主环境包含的内容

5.1.1 通信模型

(1) 通信的主体

小程序通信的主体是渲染层和逻辑层,其中:

  • WXML模板和WXSS样式工作再渲染层
  • JS脚本工作在逻辑层

(2) 而所谓的通信模型指的是:

  • 渲染层逻辑层之间的通信
  • 逻辑层第三方服务器之间的通信

5.1.2 运行机制

小程序的启动过程:

  • 把小程序的代码包下载到本地
  • 解析app.json全局配置文件
  • 执行app.js小程序入口文件,调用App()创建小程序的实例(一个小程序中,只有一个App对象,可能会有多个实例Page对象,一个页面中会有多个Component实例对象)
  • 渲染小程序首页
  • 小程序启动完成

5.1.3 组件(哪些标签可以使用)

(1) 组件的分类

① 视图容器
② 基础内容
③ 表单组件
④ 导航组件
⑤ 媒体组件
map 地图组件
canvas 画布组件
⑧ 开放能力
⑨ 无障碍访问
(2) 常用的视图容器类组件
view
  • 普通视图区域
  • 类似于 HTML 中的 div,是一个块级元素
  • 常用来实现页面的布局效果
scroll - view
  • 可滚动的视图区域
  • 常用来实现滚动列表效果
swiper swiper - item
  • 轮播图容器组件 和 轮播图 item 组件
  • 常用的属性
    • indicator-dots 是否显示面板指示点  
    • indicator-color 指示点颜色
    • indicator-active-color 激活指示点颜色
    • autoplay 是否自动切换
    • interval 自动切换时间间隔
    • circular 是否采用衔接滑动

 text和rich-text组件

  • selectable可以长按选中
  • 通过rich-text组件的nodes属性节点,把HTML 字符串渲染为 WXML 结构,类似v-html

(3) 其他常用组件

button

  • 按钮组件
  • 功能比HTML中的button按钮丰富
  • 通过open-type属性可以调用微信提供的各种功能
  • type属性指定按钮类型,size按钮的尺寸,plain镂空的按钮

image 组件的基本使用

  • src指定图片的路径,/表示根目录
  • mode属性来指定图片的裁剪和缩放模式,常用的mode属性值如下:

5.1.4 API

(1) 概述

小程序中的 API 是由宿主环境提供的,通过这些丰富的小程序 API ,开发者可以方便的调用微信提供的能力

(2) 3大分类

事件监听API

  • 特点:以 on 开头,用来监听某些事件的触发
  • 举例: wx.onWindowResize(function callback) 监听窗口尺寸变化的事件

同步API

  • 特点1:以 Sync 结尾的 API 都是同步 API
  • 特点2:同步 API 的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
  • 举例: wx.setStorageSync('key', 'value') 向本地存储中写入内容

异步API

  • 特点:类似于 jQuery 中的 $.ajax(options) 函数,需要通过 successfailcomplete 接收调
  • 用的结果
  • 举例: wx.request() 发起网络数据请求,通过 success 回调函数接收数据

顶级对象: wx

6 协同工作和发布

6.1 协同工作

(1) 项目成员的组织结构

 (2) 开发流程

 6.2 小程序成员管理

(1) 成员管理的两个方面

项目成员: 表示参与小程序开发, 运营的成员, 可以登录小程序的管理后台

体验成员: 表示参与小程序内测体验成员,可使用体验版小程序,但不属于项目成员

(2) 不同项目成员对应的权限

(3) 开发者的权限说明

 

 (4) 添加项目成员和体验成员

左侧菜单的管理 -> 成员管理

6.3 小程序的版本

(1) 软件开发过程中的不同的版本

  • 开发者编写代码的同时,对项目代码进行自测(开发版本)
  • 直到程序达到一个稳定可体验的状态时,开发者把体验版本给到产品经理和测试人员进行体验测试

(2) 小程序的版本

6.4 发布上线

(1) 步骤

上传代码 -> 提交审核 -> 发布

(2) 上传代码

① 点击开发者工具顶部工具栏中的上传按钮

② 填写版本号以及项目备注

(3) 提交审核

① 为什么需要提交审核:为了保证小程序的质量,以及符合相关的规范,小程序的发布是需要经过腾 讯官方审核的。

② 提交审核的方式:在开发版本的列表中,点击提交审核按钮之后,按照页面提示填写相关的信息,就能把小程序提交到腾讯官方进行审核。

(4) 基于小程序码进行推广

相对于普通二维码来说,小程序码的优势如下:

① 在样式上更具辨识度和视觉冲击力

② 能够更加清晰地树立小程序的品牌形象

③ 可以帮助开发者更好地推广小程序

获取小程序码的 5 个步骤:

登录小程序管理后台 -> 设置 -> 基本设置 -> 基本信息 -> 小程序码及线下物料下载

(5) 查看小程序的运营数据

在"小程序后台"查看

在"小程序数据助手"查看(下载小程序"小程序数据助手查看")

7 WXML模板语法

7.1 数据绑定

(1) 数据绑定的基本原则

  • 在data中定义数据
  • 在WXML中使用

(2) 在data中定义页面的数据

在页面对应的 .js 文件中,把数据定义到 data 对象中即可

(3) 在WXML中使用,Mustache语法

<>{ { 变量名 }}</>(标签属性中仍一样)

7.2 事件绑定

(1) 常用事件

(2) 如何定义事件处

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值