第一个微信小程序之Hello World

https://blog.csdn.net/linsongbin1/article/details/79781246

版权声明:本文为博主原创文章,未经博主允许不得转载。    https://blog.csdn.net/linsongbin1/article/details/79781246
概述
在小程序账号注册完整流程一文中详细介绍了如何注册一个小程序账号。下面我们介绍一下如何开发一个Hello World的小程序。

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

1、点击【文档】链接
2、点击【开发】链接,在弹出的选项中,选择【小程序开发】
3、点击【工具】的链接
4、从左边的导航栏中,找到【下载】这个链接
5、根据自己的操作系统平台,选择合适的版本下载
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({})
1
app.json

{
  "pages":[
    "pages/helloworld/helloworld"
  ]
}
1
2
3
4
5
6
然后创建一个pages目录,并在pages目录下创建一个helloworld目录。helloworld目录下存放四个文件。

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

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

helloworld.js

Page({})
1
helloworld.json

{}
1
helloworld.wxml

<view>Hello World</view>
1
helloworld.wxss

view {
  width: 100%;
  height: 50rpx;
  text-align: center;
}
1
2
3
4
5
保存好文件后,就可以看到小程序里可以输出一个

Hello World

OK,一个简单的小程序hello world程序就写完了。
--------------------- 
作者:Sam哥哥 
来源:CSDN 
原文:https://blog.csdn.net/linsongbin1/article/details/79781246 
版权声明:本文为博主原创文章,转载请附上博文链接!

猜你喜欢

转载自blog.csdn.net/zhangdaohong/article/details/83544782