微信小程序入门

小程序入门

1. 初始微信小程序

1.1什么是微信小程序

• 微信小程序是一种不需要安装即可使用的应用，用户只要“扫一扫”或“搜一搜”即可打开应用，无需安装或卸载。微信小程序运行于微信之上，它的交互类似于手机原生应用，但是每个应用的体积非常小（目前上限是2048KB）,具有无需安装、触手可及、用完即走、无需卸载的特点。

1.2微信小程序的账号

• 微信自诞生以来，一直以开放的方式发展，它提供了微信公众平台，可以让企业，媒体，开发者加入到平台中，为微信用户提供资讯和服务。在微信公众号中，提供了4种类型的账号，分别是服务号、订阅号、小程序和企业微信（原企业号）。打开微信公众号平台网站https://mp.weixin.qq.com.可以查看
  
• 小程序：指在微信公众平台中发布小程序所使用的账号；
• 订阅号：主要用于用户传达资讯，类似报纸、杂志等；
• 服务号：主要用于服务交互，类似银行、114，提供查询服务；
• 企业微信：主要用于公司内部通信使用，在关注企业号前要验证身份；

1.3微信小程序特点

• 微信小程序是继承原生APP、Web APP之后出现的一种新的APP形态。原生APP随之Android和iOS两大平台迅速发展逐渐变得强大起来，但由于两个平台的互不兼容，就需要开发版本，开发成本比较高。使用HTML5开发的Web APP很好的解决了跨平台的问题，但是性能和用户体验不佳。为此，微信小程序借鉴了现有的Web技术，通过独立的运行环境实现了跨平台，并提供了原生APP的使用体验，具有明显的优势。
• 微信小程序与原生APP、Web APP的区别

  对比项	微信小程序	原生APP	Web APP
  下载	无需下载，通过“扫一扫”等方式获取	从iOS和Android应用商店下载	无需下载通过浏览器进入
  安装	无需安装	安装在手机中占用存储空间	无需安装
  推送	模板信息	自主推送	浏览器无法推送，公众号中使用模板
  升级	无需升级	需要升级操作	无需升级
  开发周期	开发周期短	开发周期长	开发周期适中
  开发成本	开发成本低	开发成本高	开发成本适中

• 为了降低微信小程序的开发成本，提高开发效率，微信小程序的开发方式与WebAPP相似，即通过WXML(类似HTML)、WXSS(类似CSS)和JavaScript进行开发，可以使Web开发人员快速上手，并且提供了丰富的组件和接口，从而具有更接近原生APP的使用体验。微信小程序相比 Web APP也存在一些缺点，它不支持HTML标签和DOM(文档对象模型)操作，对于CSS的支持也是受限的，一些成熟的前端库和框架(jQuery、Vue.js)也无法使用。如果将WebAPP修改成微信小程序，需要进行大量的改动。
• 由此可见，微信小程序适合开发一些业务逻辑简单、低频次使用、对性能要求不高的应用。例如，偶尔点一次外卖、偶尔买一张车票或电影票、偶尔租赁一次自行车等。有了微信小程序，就不用专门下载、安装一个原生APP，使用更加快捷、方便。

1.4微信小程序开发前景

• 1.生态体系
  • 微信小程序是一个生态体系，将来能够更好地借助于扩展插件进行微信小程序的开发，为微信小程序用户开放更多权限，未来所发挥的空间越来越大。微信小程序通过加大对开发者的支持，能够实现更多的功能。企业也会大量引入微信小程序业务，如滴滴打车、美团外卖、货拉拉等。
• 2.开发能力
  • 微信小程序在发展过程中不断完善自己，其开放能力越来越强，能够匹配多种用户和场景。进一步完善微信小程序的开放接口，方便开发者进行深度挖掘，微信小程序的配套服务将会不断完善，对发展起到推动作用。
• 3.用户黏性
  • 微信小程序现在积累了大量的用户，且用户黏性高，让其他行业与微信用户有更好的链接，与微信更好地结合。因此微信小程序的发展空间是无限的。

2. 开发环境搭建

2.1注册微信公众号

• 1.打开微信公众号官网链接：https://mp.weixin.qq.com
• 2.选择注册类型
  
• 3.按照流程完成注册
  
• 该页面是小程序的管理后台，提供了小程序的开发，发布，管理，和统计等一系列功能
• 小程序从下图看出小程序发布流程共两个步骤，
  • 第一步需要填写小程序基本信息，下载小程序开发工具，进行小程序开发，开发完成后；
  • 第二步提交代码，等待审核。
    
• 查看App ID（App ID又称小程序ID，是每个小程序唯一的标识）
  

2.1安装微信小程序开发工具

• 在微信公众号平台网站中找到微信开发者工具的下载地址下载链接
  
• 双击下载后的安装包，安装程序打开后会看到安装向导
  
  
  
  

3. 小程序开发体验

3.1创建项目

• 在使用微信开发者工具时。需要创建一个项目
  
  

3.2开发者工具的使用

• 小程序创建成功后，会进入开发调试环境中。
  

• 1. 菜单栏

  • 项目：用于新建项目，或打开一个现有的项目。
  • 文件：用于新建文件，保存文件或关闭文件。
  • 编辑：用于代码编辑，对代码进行格式化。
  • 工具：用于访问一些辅助工具，如自动化测试，代码仓库等。
  • 界面：用于控制界面中各个部分的显示和隐藏。
  • 设置：用于对外观、快捷键、编辑器等进行设置。
  • 微信开发者工具：可以进行切换账号、更换开发模式、调试等操作。

• 2. 工具栏

  • 个人中心：位于工具栏最左侧第一个按钮，显示当前用户的用户名、头像。
  • 模拟器：编辑器和调试器：用于控制相应工具的显示和隐藏。
  • 云开发：开发者可以使用云开发来开发小程序、小游戏，无须搭建服务器，即可使用云端能力。云开发能力从基础库2.2.3开始支持。
  • 模式切换下拉菜单：用于在小程序模式、搜索动态页和插件模式之间进行切换。
  • ·编译下拉菜单：用于切换编译模式，默认为普通编译，可以添加其他编译模式。
  • 编译：编写小程序的代码后，需要编译才能运行。默认情况下，直接按Ctrl+S快捷键保存代码文件，微信开发者工具就会自动编译运行。若要手动编译，则单击“编译”按钮即可。
  • 预览：单击“预览”按钮会生成一个二维码，使用手机中的微信扫描二维码，即可在微信中预览小程序的实际运行效果。
  • 真机调试：可以实现直接利用开发者工具，通过网络连接对手机上运行的小程序进行调试，帮助开发者更好地定位和查找在手机上出现的问题。
  • 切后台：用于模拟小程序在手机中切后台的效果。
    清缓存：用于清除数据缓存、文件缓存等。
  • 上传：用于将代码上传到小程序管理后台，可以在“开发管理”中查看上传的版本，将代码提交审核。需要注意的是，如果在创建项目时使用的AppID为测试号，则不会显示“上传”
  • 版本管理：用于通过Git对小程序将进行版本管理。

• 模拟器

  • 模拟器用于模拟手机环境，cha’kan’bu’tong型号手机的运行效果。
    
  • 上方的iPhone 5表示手机型号，单击可以切换成其他手机。由于不同手机屏幕的 CSS 像素不同，宽高比也不同，在开发小程序时应对常见的手机屏幕进行适配。100%表示缩放百分比，可以调节预览画面的大小。WiFi 表示网络环境，还可以切换成2G、3G、4G 或 Offline(离线)，不同环境的网速不同，从而可以测试小程序的网络加载速度。模拟器的底部状态栏显示了当前的页面路径为pages/index/index。

• 编辑器

  • 编辑器分为左右两栏，左栏用于浏览项目目录结构，右栏用于编写代码。在左栏中单击某个文件，就可以在右栏中对该文件进行编辑。

• 调试器

  • Console：“控制台”面板，用于输出调试信息，也可以直接编写代码执行。
  • Sources:“源代码”面板，可以查看或编辑源代码，并支持代码调试。
  • Network:“网络”面板，用于记录网络请求信息，根据它可进行网络性能优化。
  • Security:“安全”面板，用于调试页面的安全和认证等信息，如HTTPS。
  • AppData:“App数据”面板，可以查看或编辑当前小程序运行时的数据。
  • Audits:“审计”面板，用于对小程序进行体验评分。
  • Sensor：“传感器”面板，用于模拟地理位置、重力感应。
  • Storage:“存储”面板，用于查看和管理本地数据缓存。
  • Trace：“跟踪”面板，用于真机调试时跟踪调试信息。
  • Wxml：Wxml面板，用于查看和调试WXML和WXSS。

• 目录结构

  • 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.wxm!	logs 页面的结构文件
  pages/logs/logs.wxss	logs 页面的样式文件
  utils/	存放公共脚本文件的目录
  utils/utils.js	公共脚本文件，保存一些工具代码

• 快捷键

  快捷键	功能描述
  Ctrl+/	注释或取消注释
  Shift+Home	选择从行首到光标处
  Shift+End	选择从光标到行尾
  Ctrl+Shift+L	选中所有匹配
  Ctrl+Home	移动到文件的开头
  Ctrl+End	移动到文件的结尾
  Ctrl+1	选中当前行
  Ctrl+U	光标回退
  Ctrl+D	选中匹配
  Ctrl+C	复制（如果没有选中任何文字则复制一行）
  Ctrl+V	粘贴
  Alt+Shift+Up	向上复制一行
  Alt+Shift+Down	向下复制一行
  Ctrl+Shift+[	折叠代码块
  Ctrl+Shift+]	展开代码块
  Ctrl+Shift+Enter	在当前行上插入一行
  Alt+Up	向上移动一行
  Alt+Down	向下移动一行
  Ctrl+Shift+F	全局搜索
  Alt+Shift+F	代码格式化
  Ctrl+[	减少缩进
  Ctrl+]	增加缩进
  Ctrl+S	保存文件