微信小程序开发准备工作 (Mac电脑)

下载开发者工具

完成安装后界面

注册为开发者 参考

安装 node.js 下载链接

下载完成后点击安装包进行安装

​

 安装完成后通过如下命令查看安装的版本号：

node -v

​

创建新项目

执行 如下命令，创建 vue_2024_11_20 的小程序项目

 vue init mpvue/mpvue-quickstart vue_2024_11_20

​

 切换到vue_2024_11_20目录执行如下命令：

npm install

​

npm run dev

​

 微信开发者工具导入项目

​

​

​

安装Intellij Idea 下载官网

激活 https://www.ajihuo.com/

创建小程序基础版

 点击头像进行登录

小程序代码构成

小程序配置 app.json 参考

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

 工具配置 project.config.json

通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。

页面配置 page.json

这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

 JSON 语法

JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。

1、数字，包含浮点数和整数

2、字符串，需要包裹在双引号中

3、Bool值，true 或者 false

4、数组，需要包裹在方括号中 []

5、对象，需要包裹在大括号中 {}

6、Null

 WXML 模板

从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。

 同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。打开 pages/index/index.wxml，你会看到以下的内容: 

WXSS 样式 

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

 JS 逻辑交互

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

点击头像

 button | 微信开放文档

点击头像输入昵称后的结果