教程硬货|微信小程序开发之基于vue的微信开发工具JS文件解读(一)

news2025/4/8 0:54:10

文章目录

    • 1 前言
    • 2 前期准备
    • 3 微信开发者工具
      • 3.1 创建项目
      • 3.2 页面介绍
    • 4 读懂Pages
      • 4.1 index.wxss
      • 4.2 index.wxml
      • 4.3 index.json
      • 4.4 index.js
    • 5 logs
    • 6 小程序的主要文件
      • 6.1 app.js
      • 6.2 app.json
    • 7 讨论

1 前言

鉴于前段时间出的第一篇记录安装Nodejs和HBuilderX搭建、部署微信小程序开发环境(一),有小伙伴问到关于微信开发工具的使用,特出本文带大家简单了解一下,开始“扫盲”!

2 前期准备

微信公众平台:https://mp.weixin.qq.com/

留意一下微信公众平台是注册小程序账号的,里面有个AppID很重要,后续开发要用到。这个AppSecret(小程序密钥)要找地方记起来。

微信开发者工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

微信开发者工具这里是要下载的对应软件的网址,下载stable版本即可,大家看着windows对应32位和64位,macos对应intel芯片和m芯片,不要下载错了。

3 微信开发者工具

3.1 创建项目

在这里选择小程序即可,AppID即在微信公众平台申请到的,复制粘贴上去即可

3.2 页面介绍

主要的工作区:


pages是整个页面的文件夹,最主要就这三个文件:

文件必需作用
app.js小程序逻辑
app.json小程序公共配置
app.wxss小程序公共样式表

而index就是所见的主页:

文件类型必需作用
js页面逻辑
wxml页面结构
json页面配置
wxss页面样式表

4 读懂Pages

作为初学者我们一步一步来,优先理解Pages的这四个文件

4.1 index.wxss

微信小程序页面的样式表,用于美化页面布局和样式:

  • userinfo 用于定义包含用户信息的容器的样式。display: flex 指定容器使用 Flex 布局,flex-direction: column 指定子元素垂直排列,align-items: center 指定子元素水平居中,color: #aaa 指定文本颜色为浅灰色。

  • userinfo-avatar 用于定义用户头像的样式。overflow: hidden 指定容器溢出部分不可见,width: 128rpx 和 height: 128rpx 指定容器宽度和高度为 128 物理像素,margin: 20rpx 指定容器与其它元素之间的空隙为 20 物理像素,border-radius: 50% 指定容器为圆形。

  • usermotto用于定义页面底部的文本样式。margin-top: 200px 指定文本距离顶部的距离为 200 物理像素。

4.2 index.wxml

WXML文件用于定义页面的结构和内容,包含以下几个部分:

  • class="container"的<view>标签是整个页面的容器,里面包含了用户信息和一个motto。
  • class="userinfo"的<view>标签是用来显示用户信息的,包含三个<block>标签。第一个<block>用于展示用户头像和昵称,如果支持开放数据组件,则使用<open-data>标签显示头像和昵称。第二个<block>用于判断是否已经获取到用户信息,如果没有则显示一个“获取头像昵称”的按钮,否则使用<image><text>标签显示头像和昵称。第三个<block>用于判断是否支持获取用户信息,如果支持则显示一个“获取头像昵称”的按钮,否则提示需要使用1.4.4及以上版本基础库。
  • class="usermotto"的<view>标签用于显示motto。
    {{}}用于在WXML中插入JavaScript表达式,比如{{canIUseOpenData}}用于判断是否支持开放数据组件。
  • bindtap和bindgetuserinfo是用于绑定事件的属性,分别表示点击事件和获取用户信息事件,后面跟着的是对应的处理函数。

4.3 index.json


JSON 对象用于在小程序页面中引入自定义组件。在小程序中,如果想要使用自定义组件,需要先在对应的 JSON 文件中声明该组件。usingComponents 是一个对象,其中的每个键都是一个自定义组件的名字,对应的值是这个组件的路径。这里目前是空白,例如加入my-component

{
  "usingComponents": {
    "my-component": "/components/my-component/index"
  }
}

4.4 index.js


这一部分是重头戏,这是小程序的逻辑部分,主要是定义了一个Page对象,其中包含了一些数据和事件处理函数。

  • 数据部分包括:

    • motto:用于存储字符串"Hello World",将在小程序界面中展示。
    • userInfo:用于存储用户信息,初始值为空对象{},当用户授权后,将存储相应的用户信息。
    • hasUserInfo:用于标识用户信息是否已经获取到,初始值为false。
    • canIUse:用于判断小程序是否支持使用button组件的open-type属性为getUserInfo的版本号,如果支持则为true,否则为false。
    • canIUseGetUserProfile:用于判断小程序是否支持使用wx.getUserProfile获取用户信息,如果支持则为true,否则为false。
    • canIUseOpenData:用于判断小程序是否支持使用open-data组件获取用户头像和昵称,如果支持则为true,否则为false。
  • 事件处理函数部分包括:

    • bindViewTap:用于点击跳转到logs页面。
    • onLoad:用于在页面加载时判断小程序是否支持使用wx.getUserProfile获取用户信息。
    • getUserProfile:用于使用wx.getUserProfile获取用户信息,并将获取到的信息存储到userInfo中。
    • getUserInfo:用于使用旧版接口wx.getUserInfo获取用户信息(即将废弃),并将获取到的信息存储到userInfo中。

5 logs

这是日志的四个文件,和index的是一样的便不展开了

6 小程序的主要文件

6.1 app.js

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

这是小程序的主入口文件 app.js,其中定义了小程序的生命周期函数和全局数据对象。

  • onLaunch 是小程序初始化时执行的生命周期函数,它通常用来获取本地存储、网络请求等操作。

  • globalData 是小程序的全局数据对象,可以用来存储全局的数据。

  • 在该文件中,onLaunch 函数中展示了如何使用本地存储 wx.getStorageSync 和 wx.setStorageSync,将日志存储到本地。

  • wx.login 是微信登录的接口,调用该接口可以获取用户登录凭证(code),开发者可以将该凭证发送到自己的服务器,以便使用微信开放平台提供的登录 API 获取用户信息。在该示例中,wx.login 并没有实现该功能。

  • globalData 中定义了一个空的 userInfo,开发者可以通过授权获取用户信息并将其保存到该对象中,以方便在小程序的各个页面中使用。

6.2 app.json

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

这是一个小程序的全局配置文件app.json,包含了小程序的一些基本配置信息,比如pages、window等字段,其中:

  • pages表示小程序的页面路径,是一个数组类型,数组中的每一项代表一个页面;
  • window字段控制小程序的全局风格,包括背景颜色、导航栏背景色、标题文字等;
  • style表示小程序的样式架构,当前为v2版本;
  • sitemapLocation表示小程序的页面地图文件位置。

一下是官网配置文件的页面配置参数

属性类型默认值描述最低版本
navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如 #000000
navigationBarTextStylestringwhite导航栏标题颜色,仅支持 black / white
navigationBarTitleTextstring导航栏标题文字内容
navigationStylestringdefault导航栏样式,仅支持以下值:default 默认样式,custom 自定义导航栏,只保留右上角胶囊按钮。iOS/Android 微信客户端 7.0.0,Windows 微信客户端不支持
homeButtonbooleanfalse在非首页、非页面栈最底层页面或非tabbar内页面中的导航栏展示home键微信客户端 8.0.24
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStylestringdark下拉 loading 的样式,仅支持 dark / light
backgroundColorTopstring#ffffff顶部窗口的背景色,仅 iOS 支持微信客户端 6.5.16
backgroundColorBottomstring#ffffff底部窗口的背景色,仅 iOS 支持微信客户端 6.5.16
enablePullDownRefreshbooleanfalse是否开启当前页面下拉刷新。详见 Page.onPullDownRefresh
onReachBottomDistancenumber50页面上拉触底事件触发时距页面底部距离,单位为px。详见 Page.onReachBottom
pageOrientationstringportrait屏幕旋转设置,支持 auto / portrait / landscape。详见 响应显示区域变化2.4.0 (auto) / 2.5.0 (landscape)
disableScrollbooleanfalse设置为 true 则页面整体不能上下滚动。只在页面配置中有效,无法在 app.json 中设置
usingComponentsObject页面自定义组件配置1.6.3
initialRenderingCachestring页面初始渲染缓存配置,支持 static / dynamic2.11.1
stylestringdefault启用新版的组件样式2.10.2
singlePageObject单页模式相关配置2.12.0
restartStrategystringhomePage重新启动策略配置2.8.0
handleWebviewPreloadstringstatic控制预加载下个页面的时机。支持 static / manual / auto2.15.0
visualEffectInBackgroundstring切入系统后台时,隐藏页面内容,保护用户隐私。支持 hidden / none,若对页面单独设置则会覆盖全局的配置,详见 全局配置2.15.0
enablePassiveEventObject 或 boolean事件监听是否
rendererstring渲染后端2.25.2

7 讨论

本文仅是于新建一个项目,然后对其原始文件进行个大概的解读,深究还要细读官方文件:https://developers.weixin.qq.com/miniprogram/dev/framework/,很详细很详细,巩固好JS打好地基。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/529757.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【C++】内存分区模型

目录 1、缘起 2、内存分区模型 2.1、程序运行前 2.2、程序运行后 3、总结 1、缘起 前几天学习完了 C 的 基础语法 知识点&#xff0c;现在终于要踏上学习 C 核心编程 的旅程了&#xff0c;期待沿途中所遇到的风景。 2、内存分区模型 C 程序在执行时&#xff0c;将内存大…

【Python Cookie 和代理 IP】零基础也能轻松掌握的学习路线与参考资料

一、Python Cookie 1、什么是Cookie&#xff1f; Cookie是一种在客户端保存数据的机制&#xff0c;服务器通过在HTTP响应头中添加Set-Cookie头实现。浏览器在接收到响应头中的Set-Cookie后&#xff0c;会将这个Cookie保存在本地。之后每次请求都会将本地保存的Cookie自动添加…

WPF插件之 - PropertyChanged.Fody插件的使用详解

总目录 文章目录 总目录一、PropertyChanged.Fody是什么&#xff1f;二、PropertyChanged.Fody的安装三、PropertyChanged.Fody的功能1. 特性1 实现属性通知的功能2 通知其他属性4 不进行属性通知3 指定属性更改时将调用的方法5 设置当前属性依赖的属性6 不检查是否相等7 DoNot…

lua:浅谈对元表和元方法的认识

前言 本篇在讲什么 浅谈对Lua元表和元方法的理解 本篇适合什么 适合初学Lua的小白 本篇需要什么 对Lua语法有简单认知 依赖Lua5.1的环境 依赖Sublime Text3编辑器 本篇的特色 具有全流程的图文教学 重实践&#xff0c;轻理论&#xff0c;快速上手 提供全流程的源码…

ETCD实现分布式锁

分布式锁具备特点 互斥性&#xff1a;在同一时刻&#xff0c;只有一个客户端能持有锁 安全性&#xff1a;避免死锁&#xff0c;如果某个客户端获得锁之后处理时间超过最大约定时间&#xff0c;或者持锁期间发生了故障导致无法主动释放锁&#xff0c;其持有的锁也能够被其他机制…

ANR实战案例 - FCM拉活启动优化

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 例如&#xff1a;第一章 Python 机器学习入门之pandas的使用 文章目录 系列文章目录前言一、Trace日志分析二、业务分析1.Firebase源码分析2.Firebase官方查看官方文档Dem…

数据压缩新利器!小精灵ELF助你高效存储与传输

存储空间不够用&#xff1f;网络传输太慢&#xff1f;想必每个人在生活中都会遇到这些问题。看着爆满的硬盘、焦急的等待数据的接受&#xff0c;更新设备&#xff1f;不是每个人都能承担这个成本。那不如尝试一下无损压缩&#xff1f; 为了减少存储空间的占用&#xff0c;提高…

《Netty》从零开始学netty源码(五十七)之ServerBootstrap.bind()

目录 ServerBootstrap.bind()initAndRegister()init()register()doBind0() ServerBootstrap.bind() 在第一篇的HelloWorld中通过ServerBootstrap.bind()方法绑定端口号并最终启动Netty的服务&#xff0c;服务端的bind过程如下&#xff1a; 上面的代码主要分成两部分&#xff0…

【P20】JMeter XPath提取器(XPath Extractor)

文章目录 一、准备工作二、测试计划 一、准备工作 百度&#xff1a;https://www.w3school.com.cn/example/xmle/cd_catalog.xml 进入网页后&#xff0c;右键检查或按F12&#xff0c;打开调试工具 如图&#xff0c;使用XPath提取器&#xff08;XPath Extractor&#xff09;获取…

typescript学习笔记(下)

1、类型拓宽 所有通过 let 或 var 定义的变量、函数的形参、对象的非只读属性&#xff0c;如果满足指定了初始值且未显式添加类型注解的条件&#xff0c;那么它们推断出来的类型就是指定的初始值字面量类型拓宽后的类型&#xff0c;这就是字面量类型拓宽。 下面我们通过字符串…

数据结构-排序-(选择、堆排序、归并排序、基数排序)

目录 一、选择排序 二、堆排序 排序 效率分析 三、归并排序 排序 分析 四、基数排序 一、选择排序 思想&#xff1a;每趟在待排序元素中选取关键字最小的元素加入有序子列 不稳定性 空间复杂度&#xff1a;O(1) 时间复杂度&#xff1a; void swap(int &a,int &…

[Linux] 动态 / 静态库的生成与使用

文章目录 简要概念 静态库生成使用 动态库生成使用 简要概念 库一般分为两种&#xff1a; 静态库动态库 在 Linux 中&#xff1a; 如果是动态库&#xff0c;库文件是以 .so 作后缀的如果是静态库&#xff0c;库文件是以 .a 作后缀的 库文件的命名&#xff1a; libXXX.so …

RBTree

目录 红黑树的概念 红黑树性质 红黑树节点设计 红黑树的插入 红黑树的验证 红黑树和AVL树的比较 红黑树的概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存储位表示结点的颜色&#xff0c;可以是Red或 Black。 通过对任何一条从根到叶子的…

Point-SLAM: Dense Neural Point Cloud-based SLAM阅读记录

前言 只读了前半部分就感慨文章结构真的好清晰&#xff0c;从Introduction到related work完完全全都在体现它的motivation——他做了一件什么事情&#xff1f;以及为什么要这么做&#xff1f;解决了什么问题。 第一遍阅读 keywords: 以RGBD作为输入 使用点云表示场景的 dens…

【P21】JMeter XPath2 提取器(XPath2 Extractor)

文章目录 一、准备工作二、测试计划 一、准备工作 百度&#xff1a;https://www.w3school.com.cn/example/xmle/cd_catalog.xml 进入网页后&#xff0c;右键检查或按F12&#xff0c;打开调试工具 如图&#xff0c;使用XPath2 提取器&#xff08;XPath2 Extractor&#xff09;…

python 使用pandas或xlrd、xlwt实现对Excel的读取、添加、追加等一系列封装

不说了&#xff0c;又是造轮子的一天。在此我要严重批评CSDN或百度一堆浑水摸鱼的&#xff0c;某些人明明代码明显报错也来上传发博客&#xff0c;要么就是标题党&#xff0c;代码没报错但压根就不是实现那个功能的&#xff0c;简直是浪费时间。 废话不多说直接贴代码&#xff…

Linux—网络基础

目录 计算机网络背景 网络发展 认识 "协议" 网络协议初识 协议分层 OSI七层模型 TCP/IP五层(或四层)模型 网络传输基本流程 协议报头 局域网通信 网络传输流程图 局域网通信图 跨网络通信图 数据包封装和分用 网络中的地址管理 认识IP地址 认识MAC地址…

8款主流产品原型设计软件分享

在产品设计中&#xff0c;你知道如何选择合适的产品设计软件吗&#xff1f;每个产品设计软件的功能实际上是不同的&#xff0c;不同的产品设计软件应用领域是不同的。 只有深入了解每个产品设计软件的功能和主要适合该软件的行业&#xff0c;我们才能在设计相应的产品时找到合…

linux内核篇-进程及其调度

介绍一个程序从源文件到进程执行的过程 1、编译链接&#xff08;源文件到二进制文件&#xff09; Linux 下面二进制的程序也要有严格的格式&#xff0c;称为ELF&#xff08;Executeable and Linkable Format&#xff0c;可执行与可链接格式&#xff09; &#xff0c;这个格式可…

Simulink 和 Gazebo联合仿真控制机械臂【Matlab R2022a】

逛 B 站&#xff0c;偶然发现一个 up 主上传的视频&#xff0c;可以实现 Simulink 中搭建机器人的控制器设计&#xff0c;对运行在虚拟机中 Gazebo 中的机械臂进行控制&#xff0c;链接&#xff1a;三关节机械臂Gazebo-Simulink联合仿真&#xff0c;这让我很感兴趣&#xff0c;…