实例-0基础微信小程序开发入门1.2-【第一个小程序】

【开启征程】

打开微信web开发者工具,点击小程序项目:


点击右下角的“+”号,将建立快速模板前面的勾去掉


然后选择体验小程序,目录随意,


点击确定,即可创建一个全空的小程序项目啦。

【创建最基本的目录结构和文件】

在开始创建之前,我们有必要了解一下最基本的东西:

​JSON 是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色。

WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构

WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。

JavaScript小程序的主要开发语言,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求。

值得一提的是,wxml与html相类似、wxss与css相类似,如果是没有html、css基础的同学也没有关系,大概了解一下这四个东西是什么即可,我们将在后面的学习中慢慢深入了解。

好了,不管对上面的内容理解程度有多少,我们直接开始吧:

首先,我们需要创建全局app所需的三个文件:app.js、app.json、app.wxss


创建好后如下图:


接下来,我们要创建单页面about所需的文件夹:【通常一个页面的四个文件我们把它们放在一个目录中】


然后在about文件夹内添加四个文件:about.js、about.json、about.wxml、about.wxss:

    

创建完成之后,我们就可以进入下一步啦~

【ps:】通常我们用一个目录管理一个页面,而一个小程序往往有多个页面,这时我们就需要把这些页面的目录放在同一个目录中以方便管理,所以我们再新建一个pages的页面,然后把about目录移至pages目录下:

    

注意:此处我们通过硬盘打开进入目录,然后直接在这里将about文件夹移入pages文件夹中,即可:

完成后即如上图所示。

【根据错误提示,编写小程序所需的最简单的代码】

  • app.json文件解析错误


json对象格式文本不能是空白,至少是一个空的对象,所以我们要对app.json添加一个空的对象:

   

添加了空的对象后,我们编译一下,发现又有一个新错误:未找到入口页面。

我们需要在这里配置这个小程序可能访问到的每个页面(Talk is cheap, show you the code:)

app.json:(注意,json文件内是不能写注释的)

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

此处[]内的意思是"pages目录下的/about目录下的/about文件"

此处用的是相对路径,如果用绝对路径"/pages/about/about"就会报错。

  • about.json文件错误

此时再看错误信息:    


发现app.json文件已经不报错了,但是about.json文件报错了,这也很好理解,因为json文件里面是不能为空的。

这里与app.json一开始类似,我们只需对about.json添加一个空对象即可:

about.json:

{
    
}

  • about.js脚本错误

然后编译,发现about.js出现脚本错误,这也说明了about.js文件不能为空


因此,我们需要在这里用page函数给about页面注册一个页面对象:

about.js:(此处从简单考虑,注册了一个空对象)

Page({})

这时我们再编译,发现已经没有错误了。

好,回归经典,我们也来输出一个hello,world:

about.wxml:(text用于输出文本)

<text>hello,world!</text>

我们来看看效果:



首先编译,然后在左上角有一个模拟器,点击即可查看效果。

虽然这个排版很丑,但是我们总算完成了第一个微信小程序,这是值得高兴的一小步。

【回顾】

       我们来回顾下本节所学内容,从创建最基本的结构目录和文件,到对app.json、about.json、about.js文件的修改,我们知道了一个小程序要运行最最基本需要的文件,以及用text输出文本。


【强化部分】

这个hello,world太小了,能不能改变它的样式呢?

方法1:

about.wxml:

<text style="font-weight:bold;font-size:55px;">hello, world!</text>

效果:


方法2:

about.wxml:

<text class="info">hello, world!</text>

about.wxss:(用类选择器定义的样式规则)(tips:info可改变名称)

.info{
  font-weight:bold;
  font-size:55px;
}

效果同方法1。

展开阅读全文

没有更多推荐了,返回首页