从零到一,你也可以做小程序(2)

如果你有html页面开发经验,小程序应该不会有任何难度,看一下官方文档即可。

这篇文章主要写给零基础的跨行小伙伴,如何开始一步一步制作自己的小程序。


上篇咱们体验了几个小程序,应该对小程序有了一个初步的了解。今天我们来看看,开发小程序,是个怎么一回事。

文中所使用的截图、工具,来自Mac系统,Windows系统下基本也是相似的。


一、项目创建

首先,打开上一篇提到的 “微信开发者工具”,


首次打开




扫码之后

我们要开发小程序,所以点左边的“小程序项目”


出现的界面如下,右侧是项目历史纪录,如果第一次打开,会是空白的。我们新建一个项目,点击新建按钮。

新建项目

之后出现界面:


创建新项目


1、项目目录,就是想要把文件存放在什么目录,点进去任意选择一个空的目录即可。

2、AppID,在上一篇让大家注册小程序帐号,是不是已经准备好了呢?没有注册的话,点击下方的体验“小程序”,也可以创建项目,但只能在开发工具的模拟器上查看,手机上是不能预览的,所以还是希望提前注册一个帐号,链接在这里 小程序注册 。

已经注册可以登录到小程序的系统,https://mp.weixin.qq.com/ 进行登录,查看自己的AppID


查找AppID

填写到AppID的框中

3、项目名称,随意起一个就可以,比如 “xxx第一个小程序”

完整展示

没有AppID的完整界面


含有AppID的完整界面

建立普通快速启动模板,选中就好,2个基础页面在里面。

这样,一个新的项目就建好了。

完整的开发工具界面


如果可以做到这一步,恭喜你,可以开始制作自己的小程序了。


二、简单认识小程序的页面组成

在开发工具中的文件目录中,点击 pages/index/index.wxml 打开,看到右侧的代码了吗?

总体认识一下


通过下图里的标注,我们看看代码都有什么作用。

标注图

看左侧区域 “获取头像昵称” 是个按钮,右侧红线框起来的代码 <button ...>获取头像昵称</button>,也就是说页面里需要一个按钮的时候,就用 <button>按钮文字</button>来写。

你可以试着,随便写点什么,感受一下。


下面的“Hello World”,代码里是 <text>{{motto}}</text>,{{motto}}是个什么东东?这个咱们急需要打开index.js文件了

Hello World

看到“Hello World”了吗?他怎么会在这里呢。没有做过前端的同学,一定会蒙圈的,我们来解释一下。

小程序的页面,有四种类型组成,分别是:.wxml、.js、.wxss、.json,以首页的index为例,是 index.wxml index.js index.wxss 这里缺少了 index.json。

.wxml: WXML(WeiXin Markup language)微信开发的一套标签语言,对应网页里的html

.wxss:WXSS(WeiXin Style Sheet) 用于描述页面的样式,对应网页里的css

.js:js脚本逻辑

.json:JSON格式的配置文件

更多介绍,可以查看这里 https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html 。

最好的基础文档,都是官方的文档。

其他的文章,都是便于更好的理解,也包括这篇文章。


三、小程序WXML的组件

其实,这部分还是看看官方文档最好,https://developers.weixin.qq.com/miniprogram/dev/component/。先大概有个印象,之后咱们在开发使用过程中,慢慢熟悉他们的使用方式。

为了便于理解,举个例子来说明一下。

页面里最常用的是view标签,可以把view想象为一张透明的纸。

默认情况:宽度和手机屏幕一样宽,高度是0,也就是如果里面没有内容,是没有高度的,如果里面放内容,高度可以无限增大。

view标签里面再嵌套一个view,可以假想为,透明的纸上面,又放了一张透明的纸。就像小朋友玩剪纸,大圆是人的脑袋,放在最底层,小圆当做眼睛,放在大圆的上面,眼睛的位置。

小程序页面里,可以用wxss来设置位置、大小、颜色、背景。。。



好的,这篇先到这里,下一篇咱们直接用“个人介绍模板”做讲解,改造成你自己的个人介绍。




1、从零到一,你也可以做小程序(1)

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 128,691评论 19 550
  • 转载链接 注:本文转载知乎上的回答 作者:初雪 链接:https://www.zhihu.com/question...
    pengshuangta阅读 23,466评论 19 291
  • 今天我登上了长城,长城里面的路很窄,像滑梯一样滑,所以很难走,不过我们有个杆子,那杆子就是让我们来抓着他来...
    怡红宝玉阅读 30评论 0 0
  • “国民品牌”是一个美誉度很高的标签,获此殊荣意味着企业在本国居民心中占据了很重要的地位,甚至变成了一种文化符号。正...
    泽西_阅读 87评论 0 1
  • 天堂迷未惜,人间幸所思;红尘三千里,梦中安身地。 作于2016.9.7
    枫从流年阅读 20评论 0 0