史上最“认真”的微信小程序自学笔记——第一课“介绍"

认识微信小程序

介绍

无需下载安装 触手可及 用完即走
小程序可提供的功能

• 分项页
• 线下扫码
• 挂起状态
• 消息通知
• 实时音视频录制播放
• 硬件连接
• 公众号关联
• 搜索查找
• 识别二维码

小程序不提供的功能

• 没有集中入口，没有应用商店
• 没有订阅关系
• 不能推送消息（可利用关联公众号进行推送）

使用场景
个人服务类项目
针对以个人为开发主体的小程序，服务范围小
企业都类项目
针对以企业为开发主体的小程序，服务范围大

微信小程序&app

• app一般需要安卓与ios版本，小程序只需要一版
• 缺乏成熟组件，缺少统计、绘图组件
• 不支持WebView，静态化好的HTML网页没办法在小程序上展示

开发准备

基础技术准备

• WXSS语言，使用类似于HTML
• 使用JavaScript来进行业务处理，兼容大部分JavaScript的功能

注册开发者账号
在页面左侧导航栏找到“开发”，然后点击横向导航“开发设置”，可找到AppID


下载并安装 微信开发者工具
可在https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html
——微信小程序开发文档 寻找自己需要的帮助

开发工具使用

创建项目

• 打开微信开发者工具，扫码登录
• 选择“小程序项目”中的“小程序”，再点击右侧的“+”号，出现新建项目页面

开发工具界面

菜单栏项目

模拟器、编程器、调试器的显示与隐藏区域

模拟器区域

• 显示小程序界面
• 界面随代码编写可以实时变化
• 模拟小程序子在各个终端设备上的操作效果
• 可以设置小程序运行的终端设备以及模拟器区域百分比大小
• 模拟设置Wi-Fi、2G、3G、4G等网络连接情况

有的初次云开发使用会出现初始化失败问题
原因：使用云开发，调试基础库版本为达到要求
解决：工具栏"详情"，“本地设置”，“调试基础库”改为2.2.3以上版本

编辑器区域

• 项目文件目录和结构展示区——在项目目录/文件上单机右键可完成新建文件、删除、重命名目录或文件等
• 代码编辑区——在该区域写代码可通过模拟器区实时预览；修改wxss、wxml文件，会刷新当前页面；修改js或jsor文件，会重新编译小程序
• 代码补全——编辑js文件（逻辑处理文件）时，会自动补全所有API，并给出相关注释；编辑wxml时，会帮助开发者直接写出相关标签；编辑json文件（数据文件）时，会补全相关配置，并给出实时提示

调试器区域

• Console——显示小程序的错误输出信息和调试代码
• Sources——显示当前项目的脚本文件（处理后的脚本）
• Network——用来观察发送的请求和调试文件
• Storage——显示当前项目使用wx.setStorage或者wx.setStorageSync后数据存储情况
• AppDate——显示当前项目当前时刻的具体数据，实时反馈项目数据情况
• Wxml——用于帮助开发者开发Wxml转化后的界面。可以看到真实的页面结构及结构对应的wxss属性，也可修改对应属性。

工具栏区域

• 编译——编译当前代码，并自动刷新模拟器
• 预览——将小程序上传，并生成预览二维码
• 真机调试——在真实手机上进行调试，会生成调试二维码
• 前后台切换——模拟客户端的操作环境（打电话后重新访问）
• 清缓存——清除各类缓存，包括数据、文件、授权、网络、登录等
• 上传——开发完成后，上传到腾讯服务器进行测试，获得测试报告，根据测试报告进行修改
• 版本管理——完成对小程序的版本管理
• 详情——查看小程序的基本信息和项目配置，也可修改本地配置

云开发

云函数、数据库、文件储存、数据分析

常用快捷键

格式快捷键
ctrl+[ 代码行缩进
ctrl+shift+[ 、] 折叠打开代码块
shift+alt+F 代码格式化
alt+up/down 上下移动一行
shift+alt+up/down 向上向下复制一行
ctrl+shift+enter 在当前行上方插入一行
ctrl+b 编译当前代码，并刷新模拟器

光标快捷键
ctrl+end 移动到文件结尾
ctrl+home 移动到文件开头
ctrl+i 选中当前行
shift+end 选择从光标到行尾
shift+home 选择从行首到光标处
ctrl+shift+L 选中所有匹配
ctrl+ D 选中匹配
ctrl+U 光标回退

（绿色为打开状态）

案例

依然是“hellow”
小程序项目名称为“ch1_demo”
熟悉开发者工具界面——模拟器、编辑、调试、工具栏区域以及云开发
第一个小程序的编写会写篇详细的附录，因为我的公众号还没有认证，就无法使用开发者ID

---

——分割线——
次日
吃了惊Σ(っ °Д °;)っ的是我注册的是个体工商户的公众号，光公众号认证就花了300软妹币，不得不说的是——不愧是腾讯