【课程简介】
小程序开发相对于App开发,开发快捷推广成本低,依托微信平台非常好推广,市面上很多企业现在都想开发自己的小程序。本次课程带大家开发一个小程序,从账号注册到编写全流程讲解,实现一个《本地生活案例》
【课程推荐】前端实战:如何开发微信小程序
【主讲内容】
1.申请、登录、初始化、介绍
2.预览测试、成员管理
3.app.json / window配置
4.app.json / tabBar配置
5.Index页面 / 轮播图
6.List页面 / 数据、事件绑定、API
7.Other页面/ 获取数据
申请、登录、初始化、介绍
预览测试、成员管理
app.json / window配置
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
小程序页面宽度一直是750rpx,需要UI出设计图就是750px,这样的话我们就知道该设计图下的其他细节的尺寸!对应小程序直接写为??rpx就OK!
List页面 / 数据、事件绑定、API
wx.showModal({
title: '提示',
content: '这是一个模态弹窗',
// 点击按钮的执行函数;
success (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
});
wx.chooseImage({
// 选择几张照片
count: 1,
// 所选的图片的尺寸:原图,压缩图
sizeType: ['original', 'compressed'],
// 来源:相册、相机
sourceType: ['album', 'camera'],
// 选择其中一项后的回调
success (res) {
const tempFilePaths = res.tempFilePaths;
}
});