正所谓万事开头难,走出第一步,后面也就顺其自然走上来了,当我要开始学习小程序的时候,看了两天的小程序官方开发文档,但是仍然不知道怎么创建我自己的一个小程序。

所以我决定在这个晚上结束这种畏惧的状态,打开笔记本,开始第一步预热操作。

1.小程序说明

小程序有一套健全的官方开发文档,中文模式,基本都能看的懂。文档中对小程序的介绍如下:

小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

2.环境安装

根据自己的系统下载安装对应的开发者工具,----下载-----

根据提示一路next安装,完成之后桌面图标如下;

微信小程序预热(一):如何开启第一个小程序
打开小程序开发者工具,用微信扫码登录开发者工具,如下:

微信小程序预热(一):如何开启第一个小程序

微信小程序预热(一):如何开启第一个小程序

3.小程序之Hello world

  1. 创建工程项目

    点击上图中的+号,新建小程序项目,步骤:填写项目名称和存放路径----->填写AppID(可注册使用自己的,也可使用测试号)------>选择小程序开发模式----->点击新建按钮。如下图:

    微信小程序预热(一):如何开启第一个小程序
    一定要注意了,项目存放目录一定要是空目录,否则会报错,如下:

微信小程序预热(一):如何开启第一个小程序

项目工程新建成功后页面如下:
微信小程序预热(一):如何开启第一个小程序

  1. 编写hello world

    可以先删除创建项目时默认的代码

    1.在index.wxml文件中写代码:

    <text class='hello'>Hello world!!!</text>
    微信小程序预热(一):如何开启第一个小程序
    2.在index.wxss文件中编写样式,类似css文件。

    微信小程序预热(一):如何开启第一个小程序
    3.在app.json文件中配置页面路径。

    微信小程序预热(一):如何开启第一个小程序
    综上效果为:

    微信小程序预热(一):如何开启第一个小程序

    每个文件的作用和配置请看这里微信小程序预热2

每天进步一点点、充实一点点、加油!!!

相关文章: