微信开发概述
微信官方将自身技术、数据、业务等资源开放给开发人员,方便实现企业与微信整合。之与相对应的一系列技术实现,称为微信开发。
微信开放平台主要提供账号管理、资质审核、技术文档等服务。开发内容主要包括移动应用开发、网站应用开发、公众账号开发、第三方平台开发。
- 移动应用开发
- 微信分享与收藏
- 微信支付
- 微信登录
- 智能接口
- 网站应用开发
- 微信登录
- 微信智能接口
- 公众账号开发
- 服务号:给企业和组织提供更强大的业务服务和用户管理能力,帮助企业快速实现全新的公众号服务平台。
- 订阅号:为媒体和个人提供一种新的信息传播方式,构建与读者之间更好的沟通与管理模式。
- 小程序:一种新的开放能力,可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
- 企业微信:企业的专业办公管理工具。支持用企业微信添加客户微信,帮助企业实现统一管理客户关系,并与微信支付、小程序等互通。
- 第三方平台开发 第三方平台的开放,让公众号或小程序运营者在面向垂直行业需求时,可以通过一键登录授权给第三方开发者,来完成相关能力。
小程序概述
小程序是一种不需要下载安装即可使用的应用。
- 2011年1月21日,微信正式上线;
- 2012年8月17日,微信公众平台正式上线。
- 2015年1月21日,朋友圈广告上线;
- 2017年1月9日,微信小程序上线;
- 从2018年1月微信小程序游戏【跳一跳】上线,截止到2018年1月,已上线小程序数量超过58万。
- 小程序能做什么
- 工具
- 内容
- 电商、餐饮
- 游戏娱乐
- ......(大厂大都提供了小程序端)
- 公司运营业务
- PC端
- 移动Web
- APP(IOS、Android)
- React Native
- ionic
- Flutter(Dart)
- 小程序
- 公众号
- 桌面程序(Electron,基于Node.js)
开发小程序准备工作
- 注册小程序账号
- 下载并安装小程序开发工具
注册小程序账号
- 进入官网
- 点击【立即注册】,选择小程序
- 订阅号
- 服务号
- 小程序
- 企业微信
- 进入注册页面
- 邮箱
- 密码
- 通过邮箱激活账号
- 完善账号信息
- 姓名
- 身份证号
- 手机号
- 进入小程序管理后台
- 设置小程序名称、头像等信息
下载并安装小程序开发工具
- 进入官网
- 通过【工具】菜单下载安装包(选择合适的版本)
- 双击安装包一直下一步就可以安装成功
- 通过工具创建小程序项目
- 需要指定项目的位置和名称
- 如果注册了小程序的账号,那么需要提供APPID
- 如果没有注册账号,使用测试账号
- 开发工具功能介绍
小程序之Hello World
- 小程序项目结构概述
- 小程序相关配置
- 全局配置app.json
- pages表示页面列表,排在第一个的是默认打开页面
- window用于设置小程序的状态栏、导航条、标题、窗口背景色。
- tabBar设置页面导航菜单
- 页面配置page.json
- 页面标题名称
- 页面背景色
- 工具相关配置project.config.json
- 全局配置app.json
- 小程序项目代码分析
- app.js文件是小程序的入口文件(小程序从该文件开始执行)
- app.wxss文件是小程序的全局样式文件
- pages文件夹用来放置小程序的页面
- wxml 模板文件,类似于之前的HTML内容
- wxss 样式文件,类似于之前的css文件
- js 文件,用于处理js的交互逻辑,与之前的js作用类似
- json文件,用于当前页面的配置
- utils文件夹用于提供一些工具方法
小程序开发框架概览
网页编程采用的是HTML+CSS+JS这样的组合,其中HTML是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS通常是用来处理这个页面和用户的交互。
在小程序中也有类似的处理方式,只是语法不同而已,相应的小程序中提供了WXML+WXSS+JS(WXS)的方式。
- wxml(模板)
- wxss(样式)
- js(交互逻辑)
- wxs(微信脚本语言)
WXML
微信小程序模板语法是特有的规则,提供了一些内置组件,也支持自定义组件
- WXML与HTML不同的地方
- 标签名字不一样
- 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
- 事件处理方式不同
内置组件的用法
- 基础组件
- text
- text标签不可以嵌套别的组件,但是可以嵌套自己
- 如果需要长按选中文本的话,必须使用text标签包裹
- icon
- progress
- text
- 容器组件
- view 类似于HTML中的div,可以进行嵌套
- 导航组件
- navigator
- 如果要跳转到tab链接,需要指定属性open-type="switchTab"
- 如果要跳转到普通链接,不需要指定open-type
- 在微信中实现链接跳转不可以使用传统的a标签
- navigator
- 媒体组件
- image
- mode裁切方式
- image
WXSS
WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。
- WXSS与CSS的不同之处
- 分为全局样式和局部样式
- 内联样式 style class
- 新增了尺寸单位rpx(px em rem 百分比 vh vw rpx)
- WXSS仅支持部分CSS选择器
JS交互逻辑
在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作
- app.js中最外层需要App({}) ,该函数是微信平台提供的api
- page.js中最外层需要Page({}),该函数是微信平台提供的api
- app.js和page.js中都可以通过data属性提供数据(data名字是固定的吗?是)
- 在page.js中可以通过getApp()方法获取全局数据(也就是app.js中的data数据),也可以获取本页面中data数据
小程序生命周期
- 程序生命周期
- onLaunch 小程序初始化完成时(全局只触发一次)
- onShow 小程序启动,或从后台进入前台显示时
- onHide 小程序从前台进入后台时
- onError 小程序发生脚本错误,或者 api 调用失败时触发,会带上错误信息
- onPageNotFound 小程序要打开的页面不存在时触发,会带上页面信息回调该函数
- 页面生命周期
- onLoad 页面加载时触发
- onShow 页面显示/切入前台时触发。
- onReady 页面初次渲染完成时触发。
- onHide 页面隐藏/切入后台时触发。
- 生命周期函数中一般用于做什么事情?
- 调用后台接口获取数据
- 启动定时任务
- 初始化操作