微信开发工具及微信小程序开发原理总结

最新推荐文章于 2023-04-23 16:31:34 发布

置顶

「已注销」

最新推荐文章于 2023-04-23 16:31:34 发布

阅读量1k

点赞数 3

分类专栏：微信小程序文章标签：微信小程序微信开发工具

本文链接：https://blog.csdn.net/qq_42286669/article/details/97615415

版权

本文总结了微信小程序的开发工具，包括调试器各区域功能：Console、Sources、Network、Storage和AppData窗口。此外，介绍了小程序的开发原理，如在js处理逻辑，wxml绑定数据，wxss设置样式。还详细阐述了小程序目录结构，如app.js、app.json、app.wxss和project.config.json的作用，以及页面生命周期和事件处理。最后，探讨了页面路由管理和setData设值函数的使用。

摘要由CSDN通过智能技术生成

我将持续在近期博客中更新我所总结的微信小程序知识，都是根据书本和个人经验总结的，作为一种记录，也希望能对其他人有点帮助。

1.调试器区域工具

Console窗口：用来显示小程序的错误输入信息和调试代码
Sources窗口：用于显示当前项目的脚本文件
Network窗口：用来观察发送的请求和调用文件的信息，包括文件名称、路径、大小、调用的状态、时间等
Storage窗口：用于显示当前项目，使用wx.setStorage或者wx.setStorageSync后的数据存储情况
AppData窗口：用于显示当前项目当前时刻的具体数据，实时地反馈项目数据情况。用户可以在此编辑数据，并及时地反馈到界面上。

2.微信小程序开发原理

在js文件里面进行业务逻辑的处理，动态地提供数据：逻辑层语言
在wxml文件里绑定数据，渲染界面：视图层描述语言
在wxss文件里添加样式，美化界面：视图样式

3.微信小程序目录介绍

（1）框架全局文件：
app.js：必需，作用是装载小程序逻辑
app,json：必需，作用是装载小程序公共设置
app.wxss：非必需，作用是装载小程序公共样式
project.config.json：必需，作用是装载小程序项目个性化配置

//1 app.js小程序逻辑

App({
  onLaunch: function () {//生命周期函数
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    // 登录
    wx.login({//登陆操作
      success: res => {
        // 发送