微信小程序开发（详解）-保证学的明明白白的

微信开发简介

1.微信开发概述

概述

（1）微信开发即微信公众平台开发，将企业信息、服务、活动等内容通过微信网页的方式进行表现，用户通过简单的设置，就能生成微信网站。
（2）通俗的说，就是微信对外提供了例如聊天、支付、分享、收藏等功能，同时还提供了丰富的封装好的接口，开发者利用这些接口和功能，写入程序中，进行的开发。

目的

（1）企业开发的需要,使自己更加符合企业发展的需求
（2）个人的发展以及技能的提升
（3）发展前景大、生态系统丰富

平台

（1）微信开放平台
（2）微信公众平台

2.微信开放平台

概述

微信开放平台是微信对外提供微信开发接口的一个平台，这些开发出来的微信接口，供第三方的网站或App使用,使用户可将第三方程序的内容发布给好友或分享至朋友圈，第三方内容借助微信平台获得更广泛的传播。

平台地址：https://open.weixin.qq.com/

微信开放平台提供的能力

微信分享、 微信支付、 微信登录、微信收藏、微信分享等等

产品应用

(1)网站应用开发
(2)移动应用开发
(3)第三方平台开发
(4)公众帐号开发

只有通过 开发者资质认证后，才能使用开发平台提供的能力

3.微信公众平台 ***

mp.wqeixin.qq.com

3.1微信公众平台概述

为开发者提供资讯和服务的平台

3.2账号分类

1、服务号
2、订阅号
3、小程序
4、企业微信

4.开放平台和公众平台的区别

1.开放平台
	(1)微信对外开放接口的平台
	(2) 开放的接口,供其他网站及App使用
	(3)后端程序员是开放平台开发的主力军
2.公众平台
	(1) 基于微信公众号，为微信用户提供服务的平台
	(2) 所用公众号，都属于微信内开发
	(3)前端程序员是公众平台开发的主力军

三、认识小程序

1.小程序概述

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

2.应用场景

适合轻量简单的开发
	快递类，商城类，餐饮类，教育。。。

3.亮点与不足

优点：
	1、不需要下载安装即可使用的应用
	2、自带流量（12亿微信用户都可以使用）
	3、开发难度低（html+css+js）
	4、开发成本低
缺点：
	1、代码大小默认只有2M
	2、不能直接分享到朋友圈

四、注册小程序账号

1.小程序账号注册流程

信息登记

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mldbeduT-1620906177905)(img/day01-1.png)]

填写管理员信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XzLlaZKN-1620906177909)(img/day01-2.png)]

2.小程序信息完善

登陆之后，找到左侧设置，如下图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iZBRUcwh-1620906177910)(img/day01-3.png)]

3、管理

版本管理：

​ 开发版

​ 体验版

​ 审核版

​ 线上版

成员管理

​ 管理员

​ 项目成员

​ 体验成员

4、开发设置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h0q3f9HV-1620906177912)(img/day01-4.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8ceaxaC8-1620906177913)(img/day01-5.png)]

注意：域名必须是https协议，，域名必须被解析

五、微信开发者工具及工程创建

首先小程序开发不同于普通的网页开发，项目不能运行在浏览器中，所以无法查看编程效果以及调试，微信开发者工具提供了代码的编程能力，调试能力以及展示运行效果能力等强大的功能

1.工具下载安装

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2.工程创建

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q5ay0ywu-1620906177914)(img/day01-6.png)]

3.工具常用功能使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uTGzf1fM-1620906177916)(img/day01-7.png)]

六、工程目录（重点）

1.初始化工程目录

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B0AVvEav-1620906177917)(img/day01-8.png)]

app.js    小程序的入口文件   类似于 vue里的main.js
app.json  全局配置文件
app.wxss  全局样式文件
project.config.json  项目关于编辑器的配置文件  
sitemap.json   站点地图（哪些页面能够被搜索到）
utils：     工具目录
pages：页面目录
	index目录
		index.wxml  页面结构 相当于html
		index.wxss  页面样式 相当于css
		index.js    页面逻辑
		index.json  页面的配置
	

  

2.小程序目录结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ll4QDdZ2-1620906177918)(img/day01-9.png)]

七、小程序配置

1.配置概述

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象，有以下属性：

2.全局配置app.json

 "entryPagePath": "pages/cart/cart",     设置默认启动页
  "pages": [                             创建页面（在pages里的页面，必须在注册注册）
    "pages/index/index",
    "pages/list/list",
    "pages/logs/logs",
    "pages/cart/cart"
  ]，
    "window": {
    "navigationBarBackgroundColor": "#f00",   窗口背景颜色
    "navigationBarTitleText": "微信小程序",     标题内容
    "navigationBarTextStyle": "black",         标题的文字颜色
    "navigationStyle":"default",               是否自定义顶部window  dustum  自定义

    "backgroundColor":"#6699cc",               下拉时的背景颜色