微信小程序详解

微信小程序详解

1. 概念1.1 什么是小程序？1.2 小程序平台有哪些1.3 优势1.4 场景1.5 传统的WEB前端的区别1.6 学习小程序开发的必要性

2. 开发准备2.1 开发者账号2.2 微信开发者工具2.3 初始化项目2.4 微信开发者工具讲解

3. 小程序运行4. 代码实践4.1 目录结构4.2 数据驱动4.3 组件化4.4 事件系统4.5 生命周期4.6 小程序API4.7 云开发

5 其他

1. 概念

1.1 什么是小程序？

前端概念下，客户端的类型：浏览器器、桌面端、APP端。 是一种全新的用户与服务连接的方式。 它可以在微信内被便捷地获取和传播，同时具有出色的使用体验

1.2 小程序平台有哪些

腾讯系： 微信小程序、企业微信。 阿里系： 支付宝，淘宝，高德 其他： 百度小程序，抖音小程序。

1.3 优势

无需下载：扫描二维码、搜索小程序入口使用方便：直接在微信内使用，不需要切换应用覆盖面广：微信用户10亿+，非常巨大的市场潜力。轻量级：体积是非常小，占用用户手机存储空间比较小更新迅速：用户每次打开的时候，都是一个新版本。

1.4 场景

电商：京东、拼多多，微信内可以直接下单。服务预约：美团、滴滴。新闻阅读：腾讯新闻、今日头条、新浪微博。工具应用类：天气预报、计算器、翻译软件。

1.5 传统的WEB前端的区别

开发语言：传统开发：HTML\CSS\JS；小程序：WXML\WXSS\JS；运行环境：传统开发：浏览器为主，Webview；小程序：微信端。用户体验：传统开发：受限于浏览器的能力；小程序：更接近于原生APP。

1.6 学习小程序开发的必要性

生态繁荣、需求量大。前端必备、刚需技能。知识清晰、有迹可循

2. 开发准备

2.1 开发者账号

https://mp.weixin.qq.com/ 企业微信：小程序能力大致相同。 APPID：https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=284083965&lang=zh_CN（申请一个）

2.2 微信开发者工具

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

2.3 初始化项目

初始化一个小程序

2.4 微信开发者工具讲解

工具栏模拟器资源管理器编辑器调试器

3. 小程序运行

运行环境 https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/env.html运行机制 https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/operating-mechanism.html更新机制 https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/update-mechanism.html

4. 代码实践

4.1 目录结构

全局文件：

app.js：整个项目的入口，初始化应用实例。 https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.htmlapp.json：对小程序做全局配置，主要包括：pages\tabbar等。https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AEprotect.config.json：全局项目配置文件。sitemap：搜索配置

页面文件：

xx.js：页面文件的入口。https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.htmlxx.json：当前页面做配置，page配置可以覆盖全局配置。https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AExx.wxml：类比传统的HTML、template（VUE）、React（JSX）。https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/xx.wxss：类比css文件。rpx 作为一个小程序开发的像素单位，和传统的px，vw，vh，百分比，rem，em 区别和关系是什么？响应式布局，媒体查询技术，mate，viewport。

4.2 数据驱动

data: {

looplist: [], // 推荐列表

goodlist: [], // 商品列表

},

onReady: function() {

// 初始化商品列表、推荐列表

this.setData({

looplist: recommends,

goodlist: list,

})

}

4.3 组件化

https://developers.weixin.qq.com/miniprogram/dev/component/

// 图片

// 块

价格：￥{{item.price}}

// 轮播

// 导航

跳转到新页面

// 地图

4.4 事件系统

addToCart(event) {

console.log(event);

// target

const _item = event.currentTarget.dataset.item;

// 已经加入的

const allSelectGoods = app.globalData.cartList;

// 新加入

app.globalData.cartList = [

...allSelectGoods,

_item,

];

// 提醒

wx.showToast({

title: '加入成功',

icon: 'success',

duration: 1000,

})

}

4.5 生命周期

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html

4.6 小程序API

wx.showToast({

title: '加入成功',

icon: 'success',

duration: 1000,

})

// 跳转

wx.redirectTo({

url: 'test?id=1'

})

wx.navigateTo({

url: 'test?id=1',

})

4.7 云开发

免登录云存储：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-http-api/storage/云函数：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/capabilities.html#%E4%BA%91%E5%87%BD%E6%95%B0云数据库：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/capabilities.html#%E6%95%B0%E6%8D%AE%E5%BA%93

5 其他

社区 https://developers.weixin.qq.com/community/develop/question https://developers.weixin.qq.com/community/develop/doc/000806b9390260884f4087ef26b800

更新日志：https://developers.weixin.qq.com/miniprogram/dev/framework/release/