小程序案例:Hello World

来自CloudWiki
跳转至: 导航搜索

创建第一个实验项目

创建小程序

登陆微信web开发者工具

点击右边图片中的加号,即可开始创建小程序

Wx1-46.png

新建项目

Wx1-47.png

如果不使用测试号,也可直接使用自己的AppID

点击“新建”按扭,进入编辑页面

Wx1-48.png

调试器类似于Google Chrome浏览器中的开发者工具:

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


创建第一个实验项目

Wx1-49.png


通过调试器 可以查看某段代码对应的网页中的哪个组件:

Wx20-1-7.png

快捷键:设置 -> 快捷键设置 for example,可以为文档搜索设置快捷键

项目设置:勾选这几个选项:增强编译、使用npm、不校验合法域名(测试环境下使用)

搜索面板:Ctrl+ p 可以快速跳转到某个文件。


创建完项目,可以返回主页面对项目进行预览和管理

Wx1-50.png

编辑小程序

Wexin22012301.png

逻辑层初步介绍

小程序页面“一切皆组件”;一切都可以视为组件

Utils: 写自定义逻辑的函数,可以将一些公共的代码抽离成为一个单独的 js (utils.js)文件,作为一个模块;

Page:页面

一个页面包含4个文件

除了视图层(即我们所看到的页面),小程序逻辑层各部分的功能如下:

  • index.js 逻辑代码
  • index.json 页面配置文件
  • index.wxml 页面结构
  • index.wxss 表示index.wxml结构的样式

app.js app.json app wxss的作用与index是类似的,但它们作用于全局

在后续的课程中我们将对逻辑层进行更深入的讲解。


参考文档:https://www.dcxueyuan.com/user/data/preview.html?id=18500&url=/common/download?urlPath=https://pu-datacastle.obs.cn-north-1.myhuaweicloud.com/content/disk/train/other/07b4a83d-a0a5-4eae-95f1-3ab551a72490.html