一、安装开发者工具

1.1. 了解微信开发者工具

image.png

1.2. 下载

推荐下载和安装最新的稳定版(Stable Build)的微信开发者工具,

下载页面的链接如下

image.png

1.3. 安装

一路下一步即可,推荐自定义安装目录

image.png

二、使用开发者工具

2.1. 扫码登录开发者工具

相关:小程序账号注册登录和AppID的获取

2.2. 设置外观和代理

image.png

image.png

image.png

三、创建小程序项目

3.1. 点击加号按钮

image.png

3.2. 填写项目信息并选择模板

相关:小程序账号注册登录和AppID的获取
image.png

3.3. 项目创建完成

image.png

四、查看项目效果

4.1. 在模拟器上查看项目效果

image.png

4.2. 在真机上预览项目效果

image.png

五、主界面的五个部分

image.png

六、小程序代码的目录结构

6.1. 了解项目的基本组成结构

image.png

image.png

6.2. 小程序页面的组成部分

小程序官方建议把所有小程序的页面,都存放在 pages 目录中,以单独的文件夹存在,如图所示:

image.png

6.3. JSON配置文件

image.png

6.3.1. app.json 文件

image.png

6.3.2. project.config.json 文件

image.png

6.3.3. sitemap.json文件

image.png

image.png

6.3.4. 页面的.json配置文件

image.png

6.4. 页面的.wxml文件

6.4.1. 什么是WXML

image.png

6.4.2. WXML和HTML的区别

image.png

6.5. 项目的.wxss文件

6.5.1. 什么是WXSS

image.png

6.5.2. WXSS和 CSS的区别

image.png

6.6. 项目的.js文件

一个项目仅仅提供界面展示是不够的,在小程序中,我们通过js文件来处理用户的操作。例如: 响应用户的点击、获取用户的位置等等。

image.png

七、快速新建小程序页面

image.png

八、修改项目首页

image.png

Logo

欢迎加入西安开发者社区!我们致力于为西安地区的开发者提供学习、合作和成长的机会。参与我们的活动,与专家分享最新技术趋势,解决挑战,探索创新。加入我们,共同打造技术社区!

更多推荐