ONLINE SERVICE
在线客服
联系客服立即所要小程序开发案例
服务时间:9:30-18:00
你可能在找下列小程序开发内容
关闭右侧工具栏
零基础小程序开发入门教程
  • 作者:147小编
  • 发表时间:2022-05-11 16:19:40
  • 来源:147采集

下载并安装微信开发者工具

首先下载微信小程序开发者工具并安装,开发者工具安装完成后我们就可以将其打开,初次打开会需要用微信扫码登录,用手机微信扫一扫后确认登录就可以了。

登录成功后,如果是第一次使用该工具会弹出创建项目的窗口,如下图:

在创建过程中,如果选择的本地文件夹是个空文件夹会出来一个勾选项在当前目录中创建quick start项目,为方便初学者了解微信小程序的基本代码结构,请勾选此项,勾选后,开发者工具会帮助我们在开发目录里生成一个简单的 demo,如下图:

下面把项目代码结构解释一下:

微信小程序中就四种类型的文件

js ---------- JavaScrip文件

json -------- 项目配置文件,负责窗口颜色等等

wxml ------- 类似HTML文件

wxss ------- 类似CSS文件

在根目录下用app来命名的这四中类型的文件,就是程序入口文件。

app.json

必须要有这个文件,如果没有这个文件,IDE会报错,因为微信框架把这个作为配置文件入口,你只需创建这个文件,里面写个大括号就行以后我们会在这里对整个小程序的全局配置。记录了页面组成,配置小程序的窗口 背景色,配置导航条样式,配置默认标题。

app.js

必须要有这个文件,没有也是会报错!但是这个文件创建一下就行 什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

app.wxss

这个文件不是必须的。因为它只是个全局CSS样式文件

app.wxml

这个也不是必须的,而且这个并不是指主界面哦~因为小程序的主页面是靠在JSON文件中配置来决定的

创建一个简单的Hello World

app.js文件管理整个程序的生命周期,所以在里面添加如下代码:(输入App IDE会有提示)

具体API解释如下

json文件负责配置ActionBar颜色,我们只需要在里面添加如下代码即可,下图有参数说明!

参数说明

现在看ActionBar是不是像那么回事了!好接下来我们继续写我们第一个界面

美化页面我们用到了 wxml 和 wxss文件

为了程序代码结构简洁,我们需要在跟目录下创建一个新文件夹 名字随意,我们这里叫pages,然后在pages文件夹里再创建新文件夹 名字随意 ,这里我们叫 index,然后我们创建index.wxml文件,然后在里面写入以下代码

然后创建index.wxss文件,然后在里面写入以下代码

然后我们创建 index.js文件在文件中输入如下代码(输入Page IDE会有提示)

函数解释如下:

配置首页

Json文件负责配置页面路径,所以我们在里面加入如下代码,其中index的含义 其实就是指index.js文件,这里需要说明一点 pages 里面的路径其实是指向js文件的,如果一个目录下没有该名称的js文件是会报错的!

这样一个简单的Hello World就完成了!