一,教程简介
1,基于微信小程序最新API规范
小程序基础
项目实战
2,小程序基础
配置文件、组件样式、事件系统
wxml语法、生命周期、小程序API
自定义组件、分包加载、开放能力
数据通信、npm支持、、、
3,项目实战
模块封装、项目首页、商品分类
商品列表、商品详情、用户管理
地址管理、购物车、结算支付
订单中心、上线发布、、、
二,小程序基础
2.1 初始微信小程序
微信小程序是一种运行在微信内部的轻量级应用程序
在使用小程序时 不需要下载安装,用户扫一扫或搜一下即可打开应用。它体现了【用完即走】的理念,用户不用关心安装太多应用的问题。它实现了应用【触手可及】的梦想,
应用无处不在,随时可用,但又无需安装卸载
2.2 注册微信小程序账号
小程序开发与网页开发不一样,在开始微信小程序开发之前,需要访问【微信公众平台】,注册一个微信小程序账号。
有了小程序的账号以后,我们才可以开发和管理小程序,后续需要通过该账号进行【开发信息的设置】、【开发成员的添加】,也可以用该账号查看小程序的运营数据。
在申请账号前,我们需要先【准备一个邮箱】,该邮箱要求:
1,未被微信公众平台注册
2,未被微信开放平台注册
3,未被个人微信号绑定过,如果被绑定了需要解绑 或 使用其他邮箱
微信公众平台地址:https://mp.weixin.qq.com
2.3 完善小程序账号信息
在完成小程序账号的注册后,需要打开微信公众平台对小程序账号进行一些设置,这是因为小程序在【上线阶段-提交审核】的时候,小程序账号信息是必填项,因此在注册小程序
以后,需要补充小程序的基本信息,如名称、图标、类目等。同时需要进行小程序备案和微信认证
小程序备案流程:购买域名-》开发一套官网平台-》ICP域名备案申请-》小程序备案申请-》腾讯审核-》工信部审核
2.4 项目成员和体验成员
小程序提供了两种不同的成员角色:项目成员和体验成员
项目成员:表示参与小程序开发、运营的成员,包括运营者、开发者及数据分析者,项目成员可登录微信公众后台,管理员可以在成员管理中添加、删除项目成员,并设置项目成员的角色。
体验成员:表示参与小程序内测体验的成员,可使用体验版小程序,但不属于项目成员。管理员及项目成员均可添加、删除体验成员。
2.5 小程序开发者ID
微信小程序账号只要开发者满足开发资质都可以进行注册,并且会获得对应的开发者ID
一个完整的开发者ID由【小程序ID(APPID)】和一个【小程序秘钥(AppSecret)】组成
【小程序ID】是小程序在整个微信账号体系内的唯一身份凭证,后续在很多地方都会用到,
例如:新建小程序项目、真机调试、发布小程序等操作时,必须有小程序ID。
【小程序秘钥】是开发者对小程序拥有所有权的凭证,在进行微信登录、微信支付,或进行发送消息等高级开发时会使用到
开发管理-》开发设置 即可找到
2.6 微信开发者工具下载
为了帮助开发者简单和高效的开发和调试微信小程序,微信官方提供了【微信开发者工具】,利用开发者工具可以很方便的进行小程序开发、代码查看以及编辑、预览和发布等。
微信开发者工具包含三个版本:
1,稳定版:稳定性高,【开发中一般推荐大家使用稳定版本】
2,预发布版:稳定性尚可,一般包含新的、大的特性,通过了内部测试
3,开发版:稳定性差,主要用于尽快修复缺陷和敏捷上线小的特性
注意事项:微信开发者工具必须联网使用
微信开发者工具地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
2.7 创建小程序项目
1,打开微信开发者工具,左侧选择小程序,点击【+】号即可新建项目
2,在弹出的新页面,填写项目信息
2.8 文件和目录结构
一个完整的小程序项目分为四个部分:主体文件、页面文件、组件文件、配置文件
【主体文件】又称全局文件,能够作用于整个小程序,影响到小程序的每个页面,主体文件必须放到项目的根目录下
主体文件由三部分组成:
1,app.js:小程序入口文件
2,app.json:小程序的全局配置文件
3,app.wxss:小程序的全局样式
注意事项:主体文件的名字必须是app,app.js和app.json文件是必须的
【页面文件】是每个页面所需的文件,小程序页面文件都存放在pages目录下,一个页面一个文件夹
每个页面通常由四个文件组成,每个文件只对当前页面有效:
1,.js:页面逻辑
2,.wxml:页面结构
3,.wxss:页面样式
4,.json:小页面配置
注意事项:.js文件和.wxml文件是必须的
小程序渲染模式:skyline 和 webView,一般使用成熟的webview渲染模式,更改的方式为:
1,找到全局文件app.json
2,去掉renderer、rendererOptions、componentFramework
3,保存之后即可
【组件文件】主要是用来存放公共组件的,一般是放在components目录下
【配置文件】分为:project.config.json、project.private.config.json、sitemap.json,其中,
project.config.json:项目配置文件,常用来进行配置公共的配置
project.private.config.json:项目私有的配置,常用来配置个人的配置
sitemap.json:配置小程序及其页面是否允许被微信索引,提高小程序在搜索引擎搜索到的概率
2.9,如何新建页面以及调试基础库
如何新建页面:
1,在pages目录下创建页面目录,如 test
2,在新建的目录右键,选择 page,然后输入页面名,如 test,工具会自动帮我们创建好四个文件
3,新建完后在app.json-》pages中可以看到自动引入的页面路径
备注:还有一种最简单快速新建页面的方式,直接在app.json-》pages中填写好新的页面路径,工具会自动创建好目录及对应的四个页面文件
小程序调试基础库是指微信开发者工具中可以选择的微信基础库版本,
【微信基础库是指小程序的运行环境,给小程序提供了运行所需的各种API和工具,以及基础框架进行逻辑等】。
小程序开发者可以在微信开发者工具中选择所需的微信基础库版本,作为运行和调试小程序时的运行环境。
每个小程序有自己所允许使用的基础库最低版本要求,开发者需要选择兼容的基础库版本,从而确保小程序的功能正常运行。
在右上角【详情-》本地设置】中即可看到调试基础库
2.10 如何调试小程序代码
在进行项目开发的时候,不可避免的需要进行调试,那么如何调试小程序呢
1,左上方点击【调试器】(一般变绿表示开启)
2,预览、真机调试、清理缓存配合使用
注意事项:
1,微信开发者工具缓存非常严重。
2,如果发现代码和预期的不一样,先点击编译
3,编译后还是没达到预期效果,就需要清除缓存,甚至重启项目才可以
三,配置文件
3.1,配置文件介绍
【JSON】是一种轻量级的数据格式,常用于前后端数据的交互,但是在小程序中,【JSON扮演的配置项的角色】,用于配置项目或者页面属性和行为,每个页面
或组件也都有一个对应的json文件。
小程序中常见的配置文件有以下几种:
1,app.json:小程序全局配置文件,用于配置小程序的一些全局属性和页面路由
2,页面.json:小程序页面配置文件,也称局部配置文件,用于配置当前页面的窗口样式、页面标题等
3,project.config.json:小程序项目的配置文件,用于保存项目的一些配置信息和开发者的个人配置
4,sitemap.json:配置小程序及其页面是否允许被微信索引,提高小程序在搜索引擎搜索到的概率
3.2 全局配置(app.json)-pages配置
pages字段:用来指定小程序由哪些页面组成,用于让小程序知道由哪些页面组成以及页面定义在哪个目录,每一项都对应一个页面的路径信息
在配置pages字段时,有以下注意事项:
1,页面路由不需要写文件后缀,框架会自动去寻找对应位置的四个文件进行处理
2,小程序中新增/减少页面,都需要对pages数据进行修改
3,未指定entryPagePath时,数组的第一项代表小程序的初始页面(首页)
entryPagePath与pages平级,如指定首页: "entryPagePath":"pages/index/index",
3.3 全局配置(app.json)-window配置
window字段:用于设置小程序的状态栏、导航条、标题、窗口背景色
window官方地址:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
如:
"window":{
#窗体标题
"navigationBarTitleText":"豆瓣电影",
#窗体背景
"navigationBarBackgroundColor":"#f3514f",
#开启下拉刷新效果
"enablePullDownRefresh":true,
#下拉刷新部分的背景色
"backgroundColor":"#efefef",
#下拉刷新...的颜色
"backgroundTextStyle":"dark"
}
3.4 全局配置(app.json)-tabbar配置
tabBar字段:定义小程序顶部、底部tab栏,用以实现页面之间的快速切换,可以通过tabBar配置项指定tab栏的表现,以及tab切换时显示的对应页面
注意事项:tab按数组的顺序排序,list配置最少2个,最多5个tab,与pages平级
tabbar官方文档地址:
如:
"tabBar":{
#被选中颜色
"selectedColor":"#f3514f",
"color":"#666",