微信小程序从零到一快速开发

  1. 云栖社区>
  2. 博客>
  3. 正文

微信小程序从零到一快速开发

itfitness 2018-06-27 14:11:00 浏览778

最近几天开发了一个关于记录书籍的小程序,业余时间从零基础边学边做总共用了5天时间,接下来我将演示如何快速开发一个小程序。

img_38613d4e95b1c5f726a629c23ba6aa5e.jpe
扫码看效果

一.首先需要先去微信公众平台注册一个小程序账号

二.下载微信开发者工具

三.开始愉快的开发吧

1.先来了解一下小程序的目录结构

img_15fd01308cd025415607f167f3e5e391.png
目录结构
images:存放图片(需要自己建立)
libs:存放第三方库
pages:存放页面
utils:存放工具文件(目前没用到)
再说一下各种后缀名文件对应的作用
.js(负责页面逻辑),.wxml(负责页面排版相当于网页的html文件),.wxss(负责页面的样式相当于网页的css文件),.json(配置文件)

2.接下来主要说一下app.json文件,小程序的标题样式、底部tabBar、页面的注册都在这里进行操作,所以app.json是非常重要的一个文件

img_3eac95aeebba5c9f1538197dbcdf5835.png
app.json

img_6cb1eea8344c788f725bdc991001a0e6.png
app.json
值得注意的是想要新建一个页面只需要在该文件里进行配置然后保存即可自动生成
img_1acd57bf05813da862067d5eee043099.png

img_dea18a46ef883bf47a9ad31270aa3ef9.png
现在简单的框架就出来了
img_4dfc446c8d06aca7ea61e380fba83893.gif
image
然后就可以愉快的开发了
比如在test页面加入我是小程序文字
test.wxml
<!--pages/test/test.wxml-->
<text class='xcx'>我是小程序</text>
test.wxss
/* pages/test/test.wxss */
.xcx{
  font-size: 60rpx;
  color: red;
  display: block;
  text-align: center;
}
img_dadb58a6a81529df9c26a9a3818b9f82.png
image

个人博客https://myml666.github.io