前端实战系列：如何开发微信小程序

电玩女神 2024-04-08 10:49 79阅读 0赞

【课程简介】

小程序开发相对于App开发，开发快捷推广成本低，依托微信平台非常好推广，市面上很多企业现在都想开发自己的小程序。本次课程带大家开发一个小程序，从账号注册到编写全流程讲解，实现一个《本地生活案例》

【课程推荐】[前端实战：如何开发微信小程序][Link 1]

【主讲内容】

1.申请、登录、初始化、介绍

2.预览测试、成员管理

3.app.json / window配置

4.app.json / tabBar配置

5.Index页面 / 轮播图

6.List页面 / 数据、事件绑定、API

7.Other页面/ 获取数据

### 申请、登录、初始化、介绍 ###

![73656fbeaf5a48a0be5a3458f2894eac.png][]

![30a0370513d343539d111e365870a488.png][]

![284b2788ef7045178c4140571bc724bc.png][]

![138d42ee9a8d4c51bb8291fbd7d9ad8c.png][]

![2b04de941ad547d1bf827c849c8328ae.png][]

![9817dce25e2f4b1e8e46a638fa139982.png][]

### 预览测试、成员管理 ###

![eafd361dcd3048dda95c956070ef6ee8.png][]

![9e04ef8d922e409ea376caaa1955c49d.png][]

### app.json / window配置 ###

![8b37d84e94954d969fd809d9f00c45bd.png][]

### app.json / tabBar配置 ###

*"**tabBar**"*: \{

*"list"*: \[

*"text"*: "首页",

*"**pagePath**"*: "pages/index/index",

*"**iconPath**"*: "./icons/home-default.png",

*"**selectedIconPath**"*: "./icons/home-active.png"

\},

*"text"*: "卡券",

*"**pagePath**"*: "pages/cards/cards",

*"**iconPath**"*: "./icons/ticket-default.png",

*"**selectedIconPath**"*: "./icons/ticket-active.png"

\},

*"text"*: "我的",

*"**pagePath**"*: "pages/my/my",

*"**iconPath**"*: "./icons/face-default.png",

*"**selectedIconPath**"*: "./icons/face-active.png"

\],

*"**backgroundColor**"*:"\#FECA49",

*"color"*:"\#D78B09",

*"**selectedColor**"*: "\#ffffff"

\},

### **Index****首页** **/** **轮播图** ###

**swiper**

**swiper-item**

**image**

![3899c8781a0d4c53bf1c0840dc44fdfd.png][]

**小程序页面宽度一直是****750rpx****，****需要****UI****出设计图就是****750px****，这样的话我们就知道该设计图下的其他细节的尺寸！对应小程序直接写为****??****rpx****就****OK****！**

### **List****页面** **/** **数据、事件绑定、****API** ###

![e3b3cbc77e624d87b1b09cfe5daa6728.png][]

![97302f0467624ad9a0a0fce52fd48e1c.png][]

wx.showModal(\{

title: '提示',

content: '这是一个模态弹窗',

// 点击按钮的执行函数；

success (res) \{

if (res.confirm) \{

console.log('用户点击确定')

\} else if (res.cancel) \{

console.log('用户点击取消')

\});

![d603afac0ef049678d085cbc0120ddf7.png][]

wx.chooseImage(\{

// 选择几张照片

count: 1,

// 所选的图片的尺寸：原图，压缩图

sizeType: \['original', 'compressed'\],

// 来源：相册、相机

sourceType: \['album', 'camera'\],

// 选择其中一项后的回调

success (res) \{

const tempFilePaths = res.tempFilePaths;

\});

### **Other****页面** **/** **获取数据** ###

![54e64791dde242af9fca7304baa9f0e7.png][]

![931ef036742e47f2975a1c6964fec8d3.png][]

[Link 1]: http://yun.itheima.com/open/772.html
[73656fbeaf5a48a0be5a3458f2894eac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/a444d8c10f2f45af9e6b5617153a2a89.png
[30a0370513d343539d111e365870a488.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/331f5f61c19b4a63b818b87274ca1e0e.png
[284b2788ef7045178c4140571bc724bc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/21ea8e11d2bd478eba0c02ff479f5039.png
[138d42ee9a8d4c51bb8291fbd7d9ad8c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/15c2608a550c4391a8d0aa9b6988ed5b.png
[2b04de941ad547d1bf827c849c8328ae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/d09c49f93c66409c96e8fecbfe65126d.png
[9817dce25e2f4b1e8e46a638fa139982.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/a96050f1f9614dcda19bbf43e0e33d81.png
[eafd361dcd3048dda95c956070ef6ee8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/8202539b5c2840f4933134e43419cfd7.png
[9e04ef8d922e409ea376caaa1955c49d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/87f6287facad4dfa8fe89c53f56f8380.png
[8b37d84e94954d969fd809d9f00c45bd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/8220ca91bf524cd0bd307e705394e927.png
[3899c8781a0d4c53bf1c0840dc44fdfd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/d294b7f8a38040fa818a3c0dbf1b4d4a.png
[e3b3cbc77e624d87b1b09cfe5daa6728.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/22ce6af434b6437da94a4d6a726374f3.png
[97302f0467624ad9a0a0fce52fd48e1c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/d648a3845a4148799ed5e1fc75a35570.png
[d603afac0ef049678d085cbc0120ddf7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/fe3799b8e73b449fb0e2d7be972de077.png
[54e64791dde242af9fca7304baa9f0e7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/6a04c976ccb44aee9eb9ea756bc6caef.png
[931ef036742e47f2975a1c6964fec8d3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/52567412a1c847f9b78ef7cb17a19231.png