small01

微信开发概述

微信官方将自身技术、数据、业务等资源开放给开发人员，方便实现企业与微信整合。之与相对应的一系列技术实现，称为微信开发。

微信开放平台主要提供帐号管理、资质审核、技术文档等服务。开发内容主要包括移动应用开发、网站应用开发、公众帐号开发、第三方平台开发。

• 移动应用开发
  • 微信分享与收藏
  • 微信支付
  • 微信登陆
  • 智能接口
• 网站应用开发
  • 微信登陆
  • 微信智能接口
• 公众帐号开发
  • 服务号：给企业和组织提供更强大的业务服务和用户管理能力，帮助企业快速实现全新的公众号服务平台。
  • 订阅号：为媒体和我的提供一种新的信息传播方式，构建与读者之间更好的沟通与管理模式。
  • 小程序：一种新的开放能力，能够在微信内被便捷地获取和传播，同时具备出色的使用体验。
  • 企业微信：企业的专业办公管理工具。支持用企业微信添加客户微信，帮助企业实现统一管理客户关系，并与微信支付、小程序等互通。
• 第三方平台开发 第三方平台的开放，让公众号或小程序运营者在面向垂直行业需求时，能够经过一键登陆受权给第三方开发者，来完成相关能力。

小程序概述

小程序是一种不须要下载安装便可使用的应用。

• 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.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
• 容器组件
  • view 相似于HTML中的div，能够进行嵌套
• 导航组件
  • navigator
    • 若是要跳转到tab连接，须要指定属性open-type="switchTab"
    • 若是要跳转到普通连接，不须要指定open-type
    • 在微信中实现连接跳转不可使用传统的a标签
• 媒体组件
  • image
    • mode裁切方式

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 页面隐藏/切入后台时触发。
• 生命周期函数中通常用于作什么事情？
  • 调用后台接口获取数据
  • 启动定时任务
  • 初始化操做