微信小程序入门

一、认识微信小程序

• 应用体积小
• 无需安装
• 触手可及
• 无需卸载

1. 跨品台
2. 与微信精密结合
3. 扫一扫或搜一搜获取小程序
4. 一键登录

　　微信小程序应用广泛：教育，媒体，交通，房地产，旅游，电商等行业

我们来打开一个微信小程序看看：搜索京东购物

           

 

 

 

 小程序支持的功能：

　　①线下扫码

　　②挂起状态

　　③消息通知

　　④小程序和公众好号的关联

　　⑤小程序的搜索和历史列表

小程序不支持的功能：

　　①小程序没有集中入口，没有应用商店

　　③小程序没有订阅关系

　　④小程序不能主动推动消息（可用模板消息）

二、微信小程序的账号

 

 

 三、微信小程序的特点

微信小程序与原生App、Web App的区别

对比项	小程序	订阅号和服务号	Web App
下载	无需下载，通过扫码 等方式获取	从ios和Android 应用 商店中下载	无需下载通过浏览器进入
升级	无需升级	需要升级操作	无需升级
安装	无需安装	安装从手机中占用存储空间	无需安装
开发成本	开发周期短	需要升级操作	开发周期适中
开发周期	开发成本低	开发成本高	开发成本适中

四、微信小程序的发展前景

　　1、生态体系

　　2、开放能力

　　3、用户粘性

五、开发环境的搭建

　　1、打开微信公众平台：点击这里

 

 

 

        2、点击小程序查看详情

　　　　

 

 

 　　　3、点击最后前往注册

　　　　　　

 

 

 　　4、按照流程注册账号

　　　　

 

 

 　　5、注册完成后点击登录

　　　　

 

 

 　　6、可以同过扫码或者账号进行登录

　　　　

 

 

 　　7、登录成功后在“开发-开发管理-开发设置”中查看AppID，为开发小程序做准备：

　　　　

 

 

 　　　8、开发者工具的下载安装：点击这里下载

　　　　　　

 

 

 

　　　　9、windows安装一般应用一样左键就行

　六、简单项目创建

　　1、首次微信扫码登录，登录成功后选择开发模式

　　2、创建项目：填写项目名称，项目所在目录，AppID，最后选择不适用云服务点击 创建项目即可

　　　　

 

 

 　　3、开发工具的使用

　　　　

 

 

 　　4、“Hello World”小程序的目录结构

路径	说明
project.config.json	项目配置文件
app.js	应用程序的逻辑文件
app.json	应用程序的配置文件
app.wxss	应用程序公共样式文件
pages/	存放页面文件目录
pages/index/	存放index页面目录
pages/index/index.js	index页面的逻辑问价
pages/index/index.wxml	index页面的结构问价
pages/index/index.wxss	index页面的样式文件
pages/logs/	存放logs页面的目录
pages/logs/logs.js	logs页面的逻辑文件
pages/logs/logs.json	logs页面配置文件
pages/logs/logs.wxml	logs页面结构文件
pages/logs/logs.wxss	logs页面样式文件
utils/	存放公共脚本文件目录
utils/utils.js	公共脚本文件，保存一些工具代码

 文件组合

 

 

 七、项目设置

　　

 

 

 　　1、项目设置及含义

　　　　①项目设置：对当前的项目进行设置

　　　　②域名信息：小程序的安全域名信息，合法域名可在管理后台进行设置

　　　　③调试基础库：选择基础库版本，用于在对应版本的微信客户端上运行

 　　　　④ES6转ES5：将JavaScript代码的ES6转化为ES5语法

　　　　 ⑤上传代码自动补全：自动检测并补全缺失的样式

　　　　 ⑥上传代码时自动压缩：压缩代码缩小代码体积

　　　　 ⑦使用npm模块：在小程序中使用npm安装第三方包

　　　　 ⑧启动自定义处理命令：指定编译前、预览前、上传前需要预处理的命令

　　　　⑨不校验合法域名、web-view、(业务域名)TIS本版以及HTTPS证书：在真是环境中会对这些信息进行校验

八、微信小程序快捷键

微信小程序开发工具快捷键

Ctrl+End	移动到文件的结尾
Ctrl+I	选中当前行
Ctrl+U	光标退回
Ctrl+D	选中匹配
Ctrl+C	复制（如果没有选中任何文字则复制一行）
Ctrl+V	粘贴
Alt+Shift+Down	向下复制一行
Alt+Shift+Up	向上复制一行
Alt+Shift+[	折叠代码块
Alt+Shift+]	展开代码块
Alt+Shift+Enter	在当前行上插入一行
Alt+Up	向上移动一行
Alt+Down	向下移动一行
Ctrl+Shift+F	全局搜索
Alt+Shift+F	代码格式化
Ctrl+[	在当前行上插一行
Ctrl+]	向上移动一行
Ctrl+S	向下移动一行

 

九、项目开发与项目上线

　　1、项目成员及权限：

　　　　

 

 

　　2、小程序开发的一般流程：

　　　　

 　　3、项目成员及权限

权限	说明
开发者权限	可以使用小程序开发者工具及开发版小程序进行开发
体验者权限	可使用体验版小程序
登录	可登录小程序管理后台无需管理员确认
数据分析	使用小程序数据分析功能查看小程序数据
开发管理	小程序提交审核、发布、回退
开发设置	设置小程序服务器域名、消息推送及扫描普通二位码打开小程序
暂停服务设置	暂停小程序上线服务
项目管理组成人员	拥有所有权限
开发组成人员	开发者权限、体验者权限、数据分析、小程序插件、腾讯云管理、接触关联公众号
产品组成成员	体验者权限、数据分析
测试组成成员	体验者权限

 

 　　4、小程序的管理后台根据这个流程设计小程序的版本管理

版本	说明
开发版本	使用开发者工具、可将代码上传到开发版本中，开发版本只保留最新上传的版本。单击提交审核，可将代码提交审核。开发版本的可删除，不影响线上版本和审核中版本代码
审核中版本	只能有一份代码处于审核中。有审核结果后可以发布到线上，也可以直接重新提交审核，覆盖原审核版本
线上版本	线上所有使用的代码版本。该版本代码在新版本代码发布后被覆盖更新

 

 　　5、预览小程序开发版本二位码：