概述

在小程序账号注册完整流程一文中详细介绍了如何注册一个小程序账号。下面我们介绍一下如何开发一个Hello World的小程序。

微信开发者工具下载

访问(https://mp.weixin.qq.com),用小程序账号登录后,按照如下步骤下载微信开发者工具。

1、点击【文档】链接
2、点击【开发】链接，在弹出的选项中，选择【小程序开发】
3、点击【工具】的链接
4、从左边的导航栏中，找到【下载】这个链接
5、根据自己的操作系统平台，选择合适的版本下载

执行刚下载的

wechat_devtools_1.02.1803210_x64.exe

一路next即可。

使用微信开发工具

安装完毕后，我们需要使用手机上的微信扫码登录。

登录成功后，有两种项目可以选择，这里我们选择【小程序项目】

接着我们需要填写小程序的路径以及APPID。

路径可以自己指定，APPID可以从【mp.weixin.qq.com】里面的【开发设置】里找到。

点击确定按钮后，进入小程序开发界面。

开发Hello World程序

这里先不介绍小程序的目录结构，直接编写程序。后续的文章再来仔细介绍小程序目录结构。

首先，先建立app.js和app.json

app.js

App({})

app.json

{"pages":["pages/helloworld/helloworld"]
}

然后创建一个pages目录，并在pages目录下创建一个helloworld目录。helloworld目录下存放四个文件。

helloworld.js
helloworld.json
helloworld.wxml
helloworld.wxss

四个文件的内容分别如下：

helloworld.js

Page({})

helloworld.json

{}

helloworld.wxml

<view>Hello World</view>

helloworld.wxss

view {width: 100%;height: 50rpx;text-align: center;
}

保存好文件后，就可以看到小程序里可以输出一个

Hello World

OK,一个简单的小程序hello world程序就写完了。

2018 博客之星

我最近在参与CSDN的博客之星评选，希望您投下宝贵的一票,多多支持我继续写博客，谢谢。

CSDN 2018博客之星,需要您投上宝贵的一票

第一个微信小程序之Hello World相关推荐

微信小程序开发与应用第一章微信小程序的基本知识1
1-1 第一章第一节微信小程序的基本知识1 文章目录前言一.注册一个小程序账号二.第一个微信小程序"Hello Wechat!" (一)准备工作 (二)页面介绍 (三)代 ...
微信小程序开发学习笔记001--认识微信小程序,第一个微信小程序
第一天,认识微信小程序,第一个微信小程序 1.什么是微信小程序? 是h5网页嘛?不是微信张小龙说: 小程序是一种不需要下载安装即可使用的应用, 它实现了应用"触手可及"的梦想,用 ...
多平台多渠道账号体系绑定第一篇-微信小程序篇
先奉上本篇实现效果多平台多渠道账号体系绑定第一篇-微信小程序篇近来,在对接三方平台时,欲将多方开放平台统一整合入笔者的框架内. 如下为大致思路设计图由于需对接多方平台关联账号体系,思来之后,将设 ...
新手尝试编写微信小程序（1）——我的第一个微信小程序
微信小程序风靡全国已经好多年了,首先是微信小程序,后面百度等多个平台都发布了自己的小程序了,可我还从未尝试过开发一个玩玩,其实对于一个程序员而言,开发一个小程序实在不是什么难事情,所以今天就要聊此心愿 ...
《移动软件开发》实验1：第一个微信小程序实验报告
2022年夏季<移动软件开发>实验报告本实验报告所参考实验文档为:Docs (feishu.cn) 如想获得详细的制作过程,请点击上面链接.该博客仅为个人使用实验报告姓名和学号? / ...
微信小程序开发笔记（二）第一个微信小程序
参考教材:<微信小程序开发入门与实践> 雷磊前置知识:JavaScript,CSS 新建项目安装好微信开发者工具后,我们就可以开始新建我们第一个微信小程序了. 选择新建项目,填入一个项 ...
《移动软件开发》实验一：第一个微信小程序
2022年夏季<移动软件开发>实验一:第一个微信小程序一.实验目标 1.学习使用快速启动模板创建小程序的方法:2.学习不使用模板手动创建小程序的方法. 二.实验步骤 1.自动生成小程序 ...
普本在校生是如何零基础在一个月内开发出第一款微信小程序的
先自我介绍一下,我是一个普通本科的大三在读生,在2020年春节前后,自己一个人开发并上线了第一款微信小程序,后续陆续开发了N款小程序,并且自己通过毕设.课设的开发在2020年上半年的疫情期间挣了一万多 ...
启动第一个微信小程序（一）
参考源码:https://pan.baidu.com/s/17y6r44hrocXVjnPBVgJd5g 提取码:fk83 接口档案:https://www.showdoc.cc/1287197394 ...
编写第一个微信小程序界面
编写第一个微信小程序界面不忘初心,方得始终:初心易得,始终难守. 传统的 web 结构小程序文件目录结构小程序页面层级结构编写第一个小程序 1. 创建小程序目录结构 2. 编写代码 welco ...

第一个微信小程序之Hello World

概述

微信开发者工具下载

使用微信开发工具

开发Hello World程序

2018 博客之星

第一个微信小程序之Hello World相关推荐

最新文章

热门文章