小程序学习 - 01小程序简介+微信小程序基础
小程序简介
小程序是一个全新的、轻量级的移动端应用。
起源
在小程序出现之前的移动端开发的解决方案有：
- Android
- iOS
- Windows Phone - 后来退出历史舞台
移动端开发发展了一段时间之后也暴漏出来一些问题，传统 App （Android / iOS）的开发和运营成本很高：
- 开发一款 App，就要开发这两个版本，既要招 Android 工程师，也要招 iOS 工程师，人力成本非常高
- App 开发完成之后，还要发版，即发布到应用商店中（例如 App Store）。发版申请提交之后要等待审核，审核不通过就需要退回调整重新发版，发版过程繁琐
- 发版完成后还需要推广，常规做法是花钱在应用商店打广告，提高 App 的排名
为了解决传统 App 的这些问题，小程序应运而生。
发展历程
最早推出小程序的是微信团队。
- 2016 年 1 月 9 日，小程序立项
- 2016年 9 月 21 日，开始内测
- 2017 年 1 月 9 日，正式上线
小程序上线之后取得了巨大的成功，这导致一些其它平台也跟风上线了小程序的内容，如支付宝、京东、今日头条、百度。
微信小程序推出的最早且目前最有影响力（后文默认介绍微信小程序）。
优势
- 相比原生 App （Android / iOS），小程序无需单独下载
- 只需要扫一扫或搜一下即可打开使用
- 小程序寄宿在 App 中，宿主 App 自带流量，所以小程序推广成本低
- 例如 2017 年的“跳一跳”，利用朋友圈成绩排名，迅速爆红
- 小程序简单易学
- Android 工程师要学习 Android 开发和 Java
- iOS 工程师要学习 Objective-C 或 Swift
- 小程序只需要掌握前端技术栈
小程序与传统网页开发的区别
小程序的运行环境与网页开发不同：
- 网页开发的运行环境是浏览器
- 小程序的运行环境是操作系统（Android / iOS）上的 App 客户端
- 如微信小程序的运行环境是微信客户端
所以小程序与网页开发有一些区别：
- 小程序中不能使用 HTML
- 小程序中可以使用 CSS
- 小程序主要开发语言是 JavaScript
- 但是 BOM（操作 HTML） 和 DOM（与浏览器交互） 在小程序中不可用
- 基于 DOM 和 BOM 的 JS 库也不能用，如 jQuery
运行环境
小程序的运行环境主要有两个：
- 渲染层 - 主要用于渲染内容和样式
- 逻辑层 - 主要用来处理 JS
不同的操作系统，内部的支持也不一样：
| 运行环境 | 逻辑层 | 渲染层 |
|---|---|---|
| iOS | JSCore | WKWebView |
| Android | V8 引擎 | Chromium 定制内核 |
虽然不同操作系统的渲染机制和逻辑不一样，但外部的表现是一样的。
微信小程序基础
下面通过案例学习微信小程序的基础使用，主要包括：
- 注册小程序账号
- 搭建开发环境
- 初始化小程序 - 类似脚手架工具生成基础代码
注册小程序账号
在小程序官网注册：https://mp.weixin.qq.com/wxopen/waregister?action=step1
注意：注册过微信公众号的邮箱，不能再注册微信小程序账号
也可以申请测试号，免注册快速体验小程序开发（不能发布）。
注册成功后，可以在后台获取小程序的 AppID，它是小程序的唯一标识。
搭建开发环境
去小程序官网，下载安装微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
详细界面介绍参考官网文档：界面
初始化小程序
打开微信开发者工具新建小程序项目：
“不使用模板” 与 “JavaScript - 基础模板” 基本没区别。
本文创建的项目：
- 项目名称：start
- AppID：注册 AppID
- 开发模式：小程序
- 后端服务：不使用云服务
- 语言：JavaScript
- 模板：不使用模板
解读初始化项目
下面依次解读小程序初始化项目：
- 目录结构
- 生命周期
- app 代码
- index 页面
- logs 页面
目录结构
官方文档：
- 目录结构
- 小程序配置
全局文件
全局文件存放在根目录，文件名是固定的，不能修改，其中包括：
- app.js - 小程序入口文件，启动小程序首先加载这个文件
- app.json - 小程序全局配置
- app.wxss - 小程序全局样式，类似网页开发的 css
页面文件
页面文件存放在 pages 文件夹下，初始包括 index 和 logs 两个页面，每个页面由四个文件组成，以 index 为例：
- index.js - 页面入口（数据绑定和逻辑代码）
- index.json - 页面配置，当前页面的页面级配置
- index.wxml - 页面内容（组件+条件渲染），类似网页开发的 html
- index.wxss - 页面样式，仅对当前页面有效的样式文件
需要注意的是：
- 小程序的页面由 4 个文件组成：
.js、.json、.wxml、.wxss，四个文件的文件名必须一致 - 小程序的页面不是由开发者手动创建的，而是由小程序自动生成的，只需要配置小程序全局配置文件
app.json的pages，保存文件后就会自动创建页面文件
例如：
"pages": [// 未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）"pages/index/index","pages/logs/logs",// pages 是页面存放目录// test 是页面存放的子目录// my-test 是页面文件名称"pages/test/my-test"
],
生命周期
小程序生命周期主要指两个循环状态：前台到后台、初始化到销毁。
关于前后台的定义参考官方文档：小程序运行机制
小程序中的生命周期有两类：
- 小程序生命周期（全局生命周期）：声明在
app.js文件中- 参考文档：注册小程序
- 页面生命周期：声明在页面的入口文件
<pagename>.js中- 参考文档：注册页面
小程序生命周期函数
常用小程序生命周期函数及触发时机：
- onLaunch - 小程序初始化，小程序冷启动时触发，全局只调用一次
- onShow - 初始化完成小程序热启动，或从后台切换到前台时触发
- onHide - 从前台切换到后台时触发
测试案例
// app.js
App({onLaunch() {console.log('onLaunch - 小程序加载')// 默认初始代码...},onShow() {console.log('onShow - 小程序显示')},onHide() {console.log('onHide - 小程序隐藏')},globalData: {userInfo: null}
})保存文件后，小程序会重新初始化，依次触发 onLaunch 和 onShow。
可点击工具栏上的 切后台 切换到后台触发 onHide。
PS：如果工具栏没有
切后台按钮，可以通过工具 - 工具栏管理设置显示的工具栏图标。
页面生命周期函数
常用页面生命周期函数及触发时机：
- onLoad - 页面加载时触发，整个页面生命阶段只执行依次
- onShow - 页面显示或切换到前台时触发
- onReady - 页面准备就绪（首次渲染完毕）时触发，整个页面生命阶段只执行依次
- onHide - 页面隐藏或切换后台时触发
- onUnload - 页面销毁（切换页面）时触发
测试案例
修改 test 页面的生命周期函数
// pages/test/test.js
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log('onLoad - 页面加载')},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {console.log('onReady - 页面就绪')},/*** 生命周期函数--监听页面显示*/onShow: function () {console.log('onShow - 页面显示')},/*** 生命周期函数--监听页面隐藏*/onHide: function () {console.log('onHide - 页面隐藏')},/*** 生命周期函数--监听页面卸载*/onUnload: function () {console.log('onUnload - 页面卸载')},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},/*** 重载页面*/goIndex: function() {// 调用原生 API 重新加载页面wx.reLaunch({url: "/pages/index/index"})}
})
添加重载功能：
<!--pages/test/test.wxml-->
<text bindtap="goIndex">跳转到 index</text>配置小程序的底部导航栏 tabBar，用于切换页面：
{"pages": ["pages/index/index","pages/logs/logs","pages/test/test"],// 窗口配置"window": {"backgroundTextStyle": "light",// 顶部导航栏背景"navigationBarBackgroundColor": "#fff",// 顶部导航栏标题"navigationBarTitleText": "Weixin",// 顶部导航栏文字颜色"navigationBarTextStyle": "black"},// 底部导航配置"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页"},{"pagePath": "pages/logs/logs","text": "日志"},{"pagePath": "pages/test/test","text": "测试"}]},"style": "v2","sitemapLocation": "sitemap.json","lazyCodeLoading": "requiredComponents"
}
上面的空白是图标预留，可以自行配置 iconPath 和 selectedIconPath。
现在点击导航栏切换页面，查看控制台输出：
- onShow 在 onReady 前执行
- 切换页面会触发 onShow 和 onHide
- 切换后台时，先触发页面的 onHide 再触发小程序的 onHide
- 切换前台时，先触发小程序的 onShow 再触发页面的 onShow
微信小程序的启动流程
官方文档 - 生命周期 中有一张图分别介绍了 View（视图）和 AppService（App 服务）两个线程的生命周期顺序：
综合小程序和页面的生命周期就是微信小程序的启动流程：
- 首先执行小程序生命周期 onLaunch
- 然后执行小程序生命周期 onShow
- 接着执行页面生命周期 onLoad，执行完成后页面就加载出来了
- 接着执行页面生命周期 onShow 显示页面
- 请求数据执行完成后，就会执行页面生命周期 onReady
- onReady 执行完成后，如果切换后台就会执行页面生命周期 onHide
- onHide 执行完成后，就会执行小程序生命周期 onHide
- 如果执行页面卸载 onUnload，页面就会被销毁
- 此时如果再访问另一个页面，就会执行这个页面的 onLoad，重复上面的调用过程
微信原生 API
小程序开发框架提供了丰富的微信原生 API，这些 API 存放在云端（服务器端），不需要自己开发和部署。
除了一些 web API，还提供了一些移动端的 API，只能在移动端调用，如：
- 拍照：调用摄像头，返回照片信息
- 扫一扫：识别二维码内容
- 等
原生 API 通过 wx.<api> 调用，详细参考 API 文档。
代码解析
app.js
// app.js
App({onLaunch() {console.log('onLaunch - 小程序加载')// 展示本地存储能力// 同步方式获取本地缓存数据const logs = wx.getStorageSync('logs') || []// 添加当前启动时间logs.unshift(Date.now())// 同步方式设置本地缓存数据wx.setStorageSync('logs', logs)// 登录wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionId}})},onShow() {console.log('onShow - 小程序显示')},onHide() {console.log('onHide - 小程序隐藏')},// 全局数据globalData: {// 旧版初始化的项目将用户信息保存在这里// 新版初始化的项目将用户信息保存在 index.js 中userInfo: null}
})以前的版本会在
onLaunch内部调用wx.getSettings获取用户当前设置，根据返回的数据判断授权状态，如果用户已授权，则调用wx.getUserInfo获取用户信息。现在更改为在
pages/index/index.js中调用的wx.getUserProfile，每次请求都会弹出授权窗口，用户同意后返回userInfo。
pages/index/index.js
初始化项目默认启动获取用户信息，可将 canIUseOpenData 设置 false 变更为手动获取：小程序启动后页面会显示 获取头像昵称，点击请求 wx.getUserProfile
// index.js
// 获取应用实例
// 获取的是 app.js 中生成的小程序的实例
const app = getApp()Page({// 绑定数据，类似 vue 的 datadata: {motto: 'Hello World',userInfo: {},hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo'),canIUseGetUserProfile: false,canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false},// 事件处理函数bindViewTap() {wx.navigateTo({url: '../logs/logs'})},onLoad() {if (wx.getUserProfile) {// 修改数据this.setData({canIUseGetUserProfile: true})}},getUserProfile(e) {// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗wx.getUserProfile({desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写success: (res) => {console.log(res)this.setData({userInfo: res.userInfo,hasUserInfo: true})}})},getUserInfo(e) {// 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息console.log(e)this.setData({userInfo: e.detail.userInfo,hasUserInfo: true})}
})WXML
官方文档：
- WXML 语法参考
- 视图层 / WXML
- 组件
WXML（WeiXin Markup Language） 是框架设计的一套标签语言。
- WXML 相当于小程序中的模板引擎
- WXML 中展示内容的具体标签，称为组件
- 数据绑定
- 数据展示（条件渲染、列表渲染）
- WXML 与组件之间的关系，就相当于 HTML 与标签
| 作用 | 小程序组件 | HTML 标签 |
|---|---|---|
| 展示区块 | view | div |
| 展示图片 | image | img |
| 展示文本 | text | p |
| 链接导航 | navigator | a |
| … | … | … |
模板
WXML 的模板可以定义代码片段，在不同地方中调用。
使用 <template> 定义模板，使用 <import> 引用模板，使用 is 声明需要使用的模板名称，使用 data 传入模板所需的数据。
注意：如果
app.json配置了"lazyCodeLoading": "requiredComponents"，开发者工具中使用了<import>引入模板的页面会显示白屏，因为项目开启了按需注入，但真机预览中会正常显示，开发时可以将该配置项删除。
代码解析
pages/index/index.wxml
<!--index.wxml-->
<view class="container"><view class="userinfo"><!-- wx:if 是 WXML 的条件渲染语法 --><!-- 使用数据或表达式的语法是 {{}} --><block wx:if="{{canIUseOpenData}}"><!-- bindtap 是事件属性，值是需要绑定的处理函数的名称 --><!-- 事件触发时会在该页面对应的 Page 中找到相应的事件处理函数 --><!-- 小程序绑定事件处理函数只接受字符串，及处理函数名 --><!-- 无法自定义调用方式或传参，如 bindtap="{{(e, 'params') => bindViewTap}}" --><!-- 可以将参数绑定在标签上（如 data-param="value"），通过 event 获取 --><view class="userinfo-avatar" bindtap="bindViewTap"><open-data type="userAvatarUrl"></open-data></view><open-data type="userNickName"></open-data></block><!-- 注意这里是 elif 而不是 elseif --><block wx:elif="{{!hasUserInfo}}"><button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button><button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button><view wx:else> 请使用1.4.4及以上版本基础库 </view></block><block wx:else><image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block></view><view class="usermotto"><text class="user-motto">{{motto}}</text></view>
</view>pages/logs/logs.js
// logs.js
// 小程序中的模块化开发遵循 CommonJS 规范（exports 导出，require 导入）
const util = require('../../utils/util.js')Page({data: {logs: []},onLoad() {// 获取日志并设置到 data 中this.setData({// 同步获取本地缓存logs: (wx.getStorageSync('logs') || []).map(log => {return {// 格式化时间date: util.formatTime(new Date(log)),timeStamp: log}})})}
})pages/logs/logs.wxml
<!--logs.wxml-->
<view class="container log-list"><!-- 列表渲染 --><block wx:for="{{logs}}" wx:key="timeStamp" wx:for-item="log"><text class="log-item">{{index + 1}}. {{log.date}}</text></block>
</view>pages/logs/logs.json
{// 优先级高于全局配置的导航标题"navigationBarTitleText": "查看启动日志","usingComponents": {}
}
小程序学习 - 01小程序简介+微信小程序基础相关推荐
- 微信小程序学习（四）：微信小程序连接云数据库
微信小程序学习(四):微信小程序连接云数据库 我今天就只是初步的连接了数据库,我就说一下我的基础代码,和我整了好久才整完的问题 这里有个初始化,非常重要!非常重要!非常重要!!! 是放在app.js里 ...
- 黯然微信小程序杂记（三）：微信小程序实现倒计时功能 附讲解教学 附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能 附超详细注释 附源码 一.功能描述 二.界面展示 三.test.wxml代码 四.test.js代码(注释很详细 很易懂) CSDN私信我,有关微信 ...
- 微信小程序开发系列教程三：微信小程序的调试方法
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hel ...
- 小程序源码：求职招聘微信小程序源码下载v4.1.78
1.多城市招聘平台2.职位版块 3.人才版块 4.招聘会(支持企业在线报名参加招聘会) 5.职场资讯6.企业登录(在手机端可操作企业信息编辑.发布职位.查收简历.通知面试) 7.企业VIP套餐购买功能 ...
- 小程序源码：求职招聘微信小程序-多玩法安装简单
1.多城市招聘平台2.职位版块 3.人才版块 4.招聘会(支持企业在线报名参加招聘会) 5.职场资讯6.企业登录(在手机端可操作企业信息编辑.发布职位.查收简历.通知面试) 7.企业VIP套餐购买功能 ...
- 【程序源代码】微信小程序商城管理系统（Java后台+微信小程序）最新版
关键字:微信小程序 商城系统 02 - [技术框架] 微信小程序商城管理系统(Java后台+微信小程序) 基于Spring+Vue+Mysql+Redis主流技术开发框架集成开发的微信商场管理系统:其 ...
- （微信小程序）微信小程序-毕设级项目搭建-微信阅读小程序（内含源码，微信小程序+java逻辑后台+vue管理系统）~不求完美，实现就好
转载地址:(微信小程序)微信小程序-毕设级项目搭建-微信阅读小程序(内含源码,微信小程序+java逻辑后台+vue管理系统)~不求完美,实现就好 转载请注明出处 作者:Happy王子乐 个人网站(整理 ...
- 微信小程序：最新wordpress黑金壁纸微信小程序 二开修复版源码下载支持流量主收益
这是一款wordpress系统框架的壁纸小程序源码 相信很多人以前也有用过这类的壁纸小程序源码吧 现在给大家发的这一款是二开修复版的 和以前的安装方式差不多,支持流量主收益模式 介绍: WordPre ...
- 25-微信小程序商城 联系客服（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）
联系客服 本节主要讲解会员功能中的联系客服界面的实现.效果如图15-11所示. 1.布局分析 结构布局分析示意如图15-12所示. 根据上面的布局分析,我们会产生基础的框架,代码示例如下: <v ...
- 【小程序源码】检讨书生成微信小程序工具源码-安装搭建简单
对于经常写检讨的小伙伴来说,福音来了 因为这是一款检讨书生成小程序 所以再也不用为了写检讨而烦恼了哦 支持自定义字数下线,主题自定义 支持多种类型检讨比如:学生党的,男朋友,领导演讲稿,共青团申请书等 ...
最新文章
- 08. 函数和流程控制
- Linux学习-15-学习LVM逻辑卷
- [转载]文本特征TFIDF权重计算及文本向量空间VSM表示
- 为什么俄罗斯不怕芯片卡脖子？
- 大型情感剧集Selenium：9_selenium配合Pillow完成浏览器局部截图
- StringUtils工具类常用方法汇总1(判空、转换、移除、替换、反转)
- js url传参进行编码
- html根据出生日期计算星座,星座测算.html
- 基于中文形近字相似度与加权编辑距离融合实现的汉字纠错算法
- linux ipv6 前缀 定义,IPv6 地址前缀
- OSG加载倾斜摄影数据
- python 实现表情迁移
- pc端调用电脑摄像头及麦克风完成录像或录音并实现回放和上传服务器
- 51单片机硬件设计-最小系统（一）
- 蓝桥杯算法训练合集三 1.车的位置2.24点3.最大分解4.RP大冒险5.士兵杀敌(二)
- Sailfish应用开发入门（二）Sailfish SDK 简介
- listen的第二个参数
- 辅流式沉淀池固体负荷计算方法_辐流式沉淀池设计计算
- easyexcel 列宽、行高、样式
- 公司最实用的软件——综合办公管理系统