微信小程序从零到入门(一)_小程序从0开发-CSDN博客

本文链接：https://blog.csdn.net/weixin_44344597/article/details/108255783

最近着手的项目要做小程序端,ui什么的都有了,便开始研究学习微信小程序.
本章简单介绍如何生成一个微信小程序的项目,及其项目的基本构成文件介绍.

1.注册微信公众平台

开发微信小程序,那么首先就要前往微信公众平台注册一个小程序(也可以在开发工具中使用测试id).

在这里插入图片描述
注册完成,登录成功会提示进行账号类型的选择,这里我们选择小程序,注意绑定的邮箱不能被其他公众平台账号绑定.

选择完成后,跳转到对应类型的开发平台.小程序账号注册完成在这里插入图片描述

2.下载开发者工具

接着,来到了我们关心的环节,开发工具的下载,从开发者官网中选择合适的版本进行下载.这里我选择的是第一个Window64位,根据自己的开发环境进行选择.
在这里插入图片描述
安装完成,打开开发工具.新建项目

3.基本页面的布局及其配置文件

1.界面布局

开发工具和VSCode的画风比较像,
顶部是工具栏:左上角的三个按钮分别控制着展示区域.
右上角第一个是版本管理,通过git进行控制.
左部是模拟器:帮助我们代码调试展示效果.
中部是代码编写区域.
右下部是控制台,可以看到console打印的日志信息.

在这里插入图片描述

2.文件类型与作用说明

在这里插入图片描述

js: 脚本文件,存放前后端交互,逻辑编写的代码.
json:静态数据配置文件
wxml:页面,类似HTML
wxss:页面样式,类似css

先从app.json文件说起,整个项目的配置文件.

{
  "pages":[    //所有需要被注册编译的页面   ,类似vue中使用router注册页面
    "pages/index/index", //页面路径
    "pages/logs/logs"
  ],
  "window":{  //全局配置
    "backgroundTextStyle":"light",  //背景字体样式
    "navigationBarBackgroundColor": "#fff", //导航背景颜色
    "navigationBarTitleText": "Weixin",//标题
    "navigationBarTextStyle":"black"//导航标题颜色
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

此文件主要管理小程序的全局配置，包括小程序页面路径，界面表现(标题，背景色，字体色)，网络超时时间，底部tab等；

这里开发者工具帮我们快速生成的配置只包含了pages字段与windows字段。

pages字段用于描述小程序所有页面路径，注意，如果你删除了此字段中的某条路径，你得同步删除掉对应的页面文件夹。反之，增加页面也是如此。

windows字段用于定于所有页面的顶部背景颜色，文字颜色，标题等，这是一个全局的配置，修改了所有页面都会生效。当然，我们可以在单个页面json配置中定义独特的风格用于覆盖全局配置，比如让每个页面的头部颜色都不一样。

修改样式,Ctrl + S 进行保存,样式发生变化.
在这里插入图片描述
app.wxss 全局样式
app.js 全局函数