评论

微信小程序开发快速入门-第一个页面编写(2/5)

微信小程序开发快速入门教程(2/5)

前言

我相信很多小伙伴看完上次的《微信小程序开发快速入门-小程序之开发前准备(1/5)》已经迫不及待想要开始编码了,今天就满足大家把代码给大家安排上!

今天主要分享的内容有以下 2 个点:

1. 项目结构及代码分析
2. 码仔备忘录项目

在这里我们会从官方提供的案例去阅读代码中的秘密,阅读完成之后我们再从零到一写一个小项目就叫码仔备忘录。在这个过程中我会从前端基础讲起,先从显示层然后再去做逻辑层,循序渐进带领大家做一个小程序。

项目结构分析

我们先要分析最外层的目录结构以及文件:

  1. pages 下面都是有两个文件夹,这个下面代表两个页面一个是index一个是logs。
  2. utils文件夹是存在工具js文件,属于工具类。
  3. 然后下面有三个以app开头的文件,这三个属于全局文件。
  4. app.js:全局App实例,是全部页面共享的。其他页面可以通过getApp()获取该实例,通常会把全局的对象存放在这里面供所有页面调用,如:用户对象。
  5. app.json:包含全局配置,所有的页面都需要配置到这里面,还有小程序头部样式。这里注意pages数组的第一项代表小程序的首页。更多配置看可以查看:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
  6. app.wxss:全局样式,这里面的样式全部共享到所有页面,无需额外引用。
  7. project.config.json:这个是基于整个⼯具的配置,例如界⾯颜⾊、编译配置等等。不需要你在

配置⽂件⾥⾯修改,⽽是通过⼯具的功能操作后,⾃动在这⾥会⽣成配置。配置详细可见:https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html

  1. project.private.config:私有化配置与 project.config.json 配置一样只是权限不一样。
  2. sitemap.json:小程序搜索配置,详细可见:https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html

通常在开发过程中我们只会关注 app.js,app.json,app.wxss 这三个文件。

页面结构

外层了解完后,再继续深入了解:

每个页面都有四个文件。

1. js:负责页面逻辑。如:登录操作,点击触发的事件处理等等

2. json:负责页面配置。如:⻚⾯的标题,⻚⾯的导航栏颜⾊等等

3. wxml:负责页面布局。如:有几个元素,如何摆放顺序等等

4. wxss:负责页面样式。如:元素⼤⼩,颜⾊等等


为了让大家更好都理解,我用游戏LOL来举个例子:

1. wxml:英雄

2. wxss:皮肤

3. js:技能

4. json:附文

到这里我们有提到页面配置和全局配置,这两个配置有一样的地方,但是很多不同到配置项,具体可见页面配置详情:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

在一个页面中,通常主要用到wxml、wxss、js。json文件大部分可以不用,直接删除不受任何影响。

小程序中的wxml,wxss,js 相当于网页开发中的html,css,js。

分析完目录结构后我们在来看看更具体的代码。

项目代码分析

小程序运行机制最开始是从app.json配置项解析。

{

  "pages":[

    "pages/index/index",

    "pages/logs/logs"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "Weixin",

    "navigationBarTextStyle":"black"

  },

  "style": "v2",

  "sitemapLocation": "sitemap.json"

}

然后再来看看首页,在这里不看页面的逻辑处理,先看页面的展示结构布局,打开调试器的Wxml来分析以下。

这里面有三个元素,头像,名字,欢迎文案。结构是从上到下排列下来。

可以看到布局代码中有view、text,这些都是小程序组件。

组件都是以标签的形式成对出现。每个组件都有属性,如:class属性。

小程序组件列表:https://developers.weixin.qq.com/miniprogram/dev/component/

后续会结合案例来单独讲解常用的组件,大家可以大概了解下小程序的组件类型。

那么组件的颜色、大小、居中以及之间的距离都是属于样式。

我们可以看到这个Hello World文本距离上面有200px的距离,这种是属于样式信息,样式都是写在wxss里面的。

在这里说明下,小程序是自动引入当前文件夹同名的样式,网页开发则需要手动额外引入。

现在大家看到这里以及大概了解一些基本概念。接下来由于官方案对于初学者来说有些复杂,接下来我们来从零到一写一个简单的页面。

基于现在的项目我们删除一些无用的代码。大家把utils文件夹删除,logs文件夹删除,app.wxss样式删除,app.json文件只留下index路径,代码如下。

{

  "pages":[

    "pages/index/index"

  ]

}

然后index文件夹下面的四个文件删除,再右键新增Page,这样就会直接新增好四个空的基础文件。然后我们得到的就是这样的一个页面。

清空掉一切无用代码后,接下里我们要开始搞个小程序项目了。最近听说码仔最近有个需求,我们去帮帮它!

码仔备忘录

需求分析

需求背景:由于码仔每天有做不完的事情,所以经常忘记一些事情。这样时候码仔需要一个备忘录用于记录自己的事情。

码仔需求:

1. 我希望有一个记录文字备忘录的功能,为了解决我健忘的毛病。
2. 我希望可以同时记录多条备忘录,因为要做的事情实在太多了。
3. 我希望可以删除备忘录,眼不见心不烦,做完了就不想在看了。

项目界面:

1. 开启页面

2. 列表页面

    1. 无数据状态

    2. 有数据状态

3. 添加页面

布局编写

先从启动页面开始,布局分析:

一共是两个元素,一个是码仔图片,一个是按钮。

首先在项目中新建一个images文件夹存放码仔图片和按钮背景图与pages文件夹同级。

  1. 在新建的时候注意选择最外层的文件,如:app.js,因为只有这样建立的文件夹才会与pages同层级,否则如果选中pages那就是与在pages下一级文件夹了。

建立好images文件夹后右键打开文件夹,把下载好的素材图片改好名字放入文件。

准备好素材之后我们开始对页面做布局代码编写。

通常我们都会用view容器来包裹住所有组件。image组件就有个src属性用于放显示的图片路径。

具体可以查看image的文档,https://developers.weixin.qq.com/miniprogram/dev/component/image.html 有问题查文档,我们可以把文档当作字典来使用,用的时候就针对性查阅。

代码如下:

<view>

<image src="/images/home_logo.png"></image>

<view>按钮</view>

</view>



这里我们是用view组件包裹来一个image组件和view组件,那么这个时候有人就说为什么不用button组件?因为button组件用起来比较麻烦,button自带很多样式,布局起来比较麻烦。除非要用到button到特殊能力,否则通常情况下是不用button组件的,view组件可以通过css来完成按钮样式。

看下上面代码显示的样式,我们会发现图片有些变形。

这个是为什么呢?我们通过调试器Wxml定位看下。

小技巧:wxml用旁边的小鼠标可以点击元素快速定位布局。

我们可以看到图片组件有个默认样式宽度320px、高度240px。

接下来我们给这个图片来个样式。通常是根据图片的实际大小来设置宽度和高度。

这张图片是500x468,那么给它来一个样式。

<view>

  <image src="/images/home_logo.png" style="width:468rpx;height: 500rpx;"></image>

  <view>按钮</view>

</view>



知识点:样式选择器

从图片样式上来看,没有问题了。但是这里其实还包含个css知识点。上面用style属性来直接编写样式叫行内样式。这种虽然可以实现效果但是不够灵活,所以更好的写法实在wxss里面写。

代码如下:

index.wxss

.logo{
  width: 500rpx;
  height: 468rpx;
}


index.wxml

  <view>

  <image src="/images/home_logo.png" class="logo"></image>

  <view>按钮</view>

</view>



这种是最常用的类选择器,还有一种类型选择器,写法如下:

index.wxss

image{
  width: 500rpx;
  height: 468rpx;
}

index.wxml

  <view>

  <image src="/images/home_logo.png" ></image>

  <view>按钮</view>

</view>



能达到效果都一样,一个是类选择器主要是针对具体的组件引用样式,类型选择器就是这个页面所有这种类型的组件都会被应用这个样式。如果是在一个页面多个组件都是同样都样式就用类型选择器,如果是单个就用类选择器。


知识点:样式优先级

还有一种情况就是如果有多个页面都用同一个样式,那就把样式放在app.wxss里面这样可以所有页面都共享这个样式,这样可以减少重复代码编写。这个时候有人会说了,如果公共样式里面有都,我当前页面重复了会怎么样呢?就近原则,当前样式大于公共样式,无论是样式还是配置一样原则。

接下来我们回过头来再次选中图片来看看这个图片的样式。

我们可以看到结合刚才的原则,两个都是类型选择器样式,我们当前的样式就覆盖了默认的图片样式。不知道有没有人发现了一个小细节,默认样式的宽高单位和我们自己写的单位不一致,一个是px另外一个是rpx。那么这两个有什么区别呢?

知识点:rpx

看下文档对rpx解释:

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

在iPhone6上1px = 2rpx。拿上面那张图举例500x468,px就是250x234才能显示一样的大小。这个rpx是小程序独有的,可以用于适配各种屏幕做到等比例缩放,所以以后咱们就用rpx。

具体对比效果,你可以通过切换模拟器机型来体验px和rpx的效果。px为固定大小,rpx为自适应大小。

好了,到这里继续写下面的代码,写完图片样式之后,我们再来看看按钮。我们可以看到素材按钮其实也是一张图片,我们把原来的view组件改成image组件。这里需要注意的是这个时候需要把类型选择器改成类选择器,因为两个都是image图片样式也不是一样的,所以我们还是选择用类选择器的写法。

看效果,用上面同样的写法来完成

wxml

  <view>

  <image src="/images/home_logo.png" class="logo" ></image>

  <image src="/images/home_btn.png" class="btn"></image>

</view>

wxss

.logo{
  width: 500rpx;
  height: 468rpx;
}

.btn{
  width: 550rpx;
  height: 150rpx;
}


接下来还要写个改变下背景颜色,这个时候我们可以给page设置一个背景颜色。

在这里肯定你会有疑问,page这个组件好像没在布局里面写呀,它是哪里来的?这个就是小程序每个页面都会自己套一层page组件,可以通过调试器的Wxml看到page组件。通常我写背景颜色都用它,page文档里面也没有说明,有时候需要大家细心观察。

知识点:Flex布局

接下来还需要把这两张图片居中显示,这个时候就要用到css最常用的Flex布局了。我们可以把包裹这两张图片的view看成一个容器,然后控制容器的样式来改变容器内里面组件的布局样式。

看效果

wxml

 
<view class="container">

  <image src="/images/home_logo.png" class="logo" ></image>

  <image src="/images/home_btn.png" class="btn"></image>

</view>
  


wxss

.container{

  /* 显示类型 :弹性布局 */

  display: flex; 

  /* 排列方向:垂直方向,从上到下 */

  flex-direction: column;

  /* 纵轴对齐方式:居中 */

  align-items: center;

  /* 向上的边距:100rpx */

  margin-top: 100rpx;

}


.logo{

  width: 500rpx;

  height: 468rpx;

}


.btn{

  width: 550rpx;

  height: 150rpx;

}


page{

  background-color: #F8D300;

}

这个flex布局方式非常常用,所以要重点学习。

Flex 布局教程:语法篇:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

然后再来看下与效果图的对比,按钮和上面logo图片距离相隔168像素,给btn样式加一个外边距的样式margin-top样式。


如果前端基础弱的同学可以外边距的教程:https://www.runoob.com/css/css-margin.html

添加完距离之后在看看效果。

最后就差头部这个标题栏部分了,之前就有提到如果是全局配置就找在app.json。来看看全局配置文档:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

在配置里面有个window对象里面配置下navigationBarBackgroundColor属性配置成主色调。

看下效果

app.json

{

  "pages": [

    "pages/index/index"

  ],

  "window": {

    "navigationBarBackgroundColor":"#F8D300"

  }

}


好了,我们第一个小程序静态页面大功告成。

最后

这一章节主要是带着大家完成来一个小程序静态页面,主要目的是为了让大家了解下小程序到页面和样式。在此再次强调Flex布局非常重要。大家一定要反复练习,后续会被频繁使用到。

最后一次编辑于  2022-03-11  
点赞 5
收藏
评论

9 个评论

  • 2023-12-27

    会写代码的话,就用微信开发者工具来开发微信小程序。

    如果不会写代码的话,建议可以使用第三方无代码微信小程序开发工具来完成小程序开发。

    使用第三方无代码微信小程序开发工具操作如下:

    提示:全程用电脑,在第三方无代码微信小程序开发工具官网上操作!

    1.在第三方无代码微信小程序开发工具官网【https://8t.fkw.com】上注册一个账号,这里需要用到常用的手机号或微信号注册,方便后续的再次登录!

    2.开通 -【轻站小程序】这款微信小程序制作工具权限。

    然后就是套用微信小程序模板,在挑选微信小程序模板的使用,可以根据自己行业,来进行选择,也可以直接在搜索框进行搜索。

    套用完专业的微信小程序模板后,紧接着就是进入到微信小程序开发页面,页面分为3个部分,左中右,顺序也从左到右来使用,通过拖动左侧的微信小程序开发工具栏的功能,至中部的微信小程序开发页面,然后再通过调整右侧的样式设置,来完成微信小程序开发。

    如果在制作途中,遇到有功能无法添加,那可能是因为没有升级套餐哦,我们可以返回到【企业中心】,对【轻站小程序】进行升级。

    对轻站小程序的功能版本进行升级!升级完成后,就可以继续正常开发了!

    4.完成微信小程序制作后,就可以到后台进行微信小程序账号的注册,这边建议用法人身份注册会更快哦,当然如果有企业主体的公众号,也可采用复用公众号资质的方式,来申请微信小程序账号,这两种方式都是免除300元认证费的。

    完成申请后,就进行绑定就可以啦。


    2023-12-27
    赞同 3
    回复 1
    • lucassss
      lucassss
      2023-12-27
      谢谢
      2023-12-27
      回复
  • 微笑
    微笑
    03-18

    我这里怎么还显示这行代码呢?还有我的导航栏和正式页面之间有条白线是什么呢

    03-18
    赞同
    回复 1
    • 微笑
      微笑
      03-18
      代码知道了,白线还不知道
      03-18
      回复
  • 美味海星罐头
    美味海星罐头
    2023-08-04

    我自己尝试的时候,做到了给view加container的这步。btn样式没加margin-top,上面的logo和下面的按钮都会分开,加了margin-top之后也没什么变化。感觉是不是版本更新了的问题。

    2023-08-04
    赞同
    回复 3
    • 美味海星罐头
      美味海星罐头
      2023-08-04
      也有可能是我没删干净默认模板配置
      2023-08-04
      回复
    • 陈宇明
      陈宇明
      2023-08-07
      你可以看下是不是因为 btn 有默认样式
      2023-08-07
      回复
    • 美味海星罐头
      美味海星罐头
      2023-08-09回复陈宇明
      不是,后来发现是全局样式那个文件没清干净
      2023-08-09
      回复
  • Zan
    Zan
    2022-12-14

    大哥,后面3章在哪能看?

    2022-12-14
    赞同
    回复 1
    • 陈宇明
      陈宇明
      2023-01-14
      下一章节已发布
      2023-01-14
      回复
  • byz
    byz
    2022-12-07

    不错!加油!

    2022-12-07
    赞同
    回复
  • 雨神
    雨神
    2022-11-01

    老哥,别停啊,继续啊,写的非常棒

    2022-11-01
    赞同
    回复 1
    • 陈宇明
      陈宇明
      2023-01-14
      下一章节已发布
      2023-01-14
      回复
  • Superme
    Superme
    发表于移动端
    2022-07-24
    写的很好啊,期待下一章节
    2022-07-24
    赞同
    回复 1
    • 陈宇明
      陈宇明
      2023-01-14
      下一章节已发布
      2023-01-14
      回复
  • brave
    brave
    发表于移动端
    2022-03-09
    图挂了 然后app.josn?
    2022-03-09
    赞同
    回复 5
    • 陈宇明
      陈宇明
      2022-03-09
      收到,我处理下
      2022-03-09
      回复
    • 陈宇明
      陈宇明
      2022-03-09
      图片已修复
      2022-03-09
      回复
    • brave
      brave
      2022-03-10回复陈宇明
      2022-03-10
      回复
    • 陈宇明
      陈宇明
      2022-03-11回复brave
      犀利的眼神,改好了
      2022-03-11
      回复
    • sunny
      sunny
      2023-10-23回复陈宇明
      原图在哪里哪呀,没看到可以拿原图的呀
      2023-10-23
      回复
  • 马尚尚
    马尚尚
    2022-03-09

    不如出个视频教程比较好,如果出系列教程的话

    2022-03-09
    赞同
    回复 1
    • 陈宇明
      陈宇明
      2022-03-09
      好的,等出完文字版本,后续补个教程
      2022-03-09
      回复
登录 后发表内容