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

微信小程序——介绍

  • 认识微信小程序
    • 介绍
    • 开发准备
    • 开发工具使用
          • 菜单栏项目
          • 模拟器、编程器、调试器的显示与隐藏区域
          • 模拟器区域
          • 编辑器区域
          • 调试器区域
          • 工具栏区域
          • 云开发
          • 常用快捷键
    • 案例

认识微信小程序

介绍

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

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

小程序不提供的功能

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

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

微信小程序&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软妹币,不得不说的是——不愧是腾讯

你可能感兴趣的:(“最全”微信小程序取经真集)