登录 | 注册
小程序交流 +关注 已有0人关注 +发表新主题

从一个简单的页面开始小程弃之旅

发表在 2019-3-20 19:07 来自PC 复制链接 手机看帖 扫一扫!手机看帖更爽 0 616

从一个简单的页面开始小程弃之 旅

从一个简单的页面开始小程弃之 旅
新人一般从编写一个简单的页面开始,因为码农编写的第一个程序就是Hello World开始。我们将分三步,逐步介绍小程序的基本文件结构、样式、配置文件等小程序开发知识。老鸟可以省略。


一、基本文件结构
小程序的目录结构非常简单,也非常易于理解,不同于某些框架设计过度。


新建的项目都是由3个文件:app.jsapp.jsonapp.wxss。一个小程序项目必须有这3个描述App的文件,它们必须放在应用程序的根目录下,否则小程序会提示找不到app.json文件。


文件
必填
作用
app.js
逻辑文件
app.json
配置文件
app.wxss
样式文件


接着就是pages文件夹,看单词就知道是页面文件目录。一个小程序由若干个页面文件构成。每个页面由4个文件构成,分别是:jswxmlwxssjson文件。


文件
必填
作用
js
逻辑文件
wxml
页面结构
wxss
样式文件
json
页面配置


pages文件夹外,还有一个utils文件夹,这个文件夹用来存放公共js文件。

二、编写页面
我们在项目pages文件夹下新建一个名为welcome的文件夹,接着在welcome文件夹下新建4个文件:welcome.jswelcome.wxmlwelcome.wxsswelcome.json


接下来,我们要做的事情是让页面能够成功显示出来。要显示welcome这个页面,必须让小程序知道这个页面的存在以及这个页面的具体位置。


那么我们需要在app.json注册一个welcome页面。

{
    "pages": [
        "pages/welcome/welcome"
}


需要注意的是,welcome.jswelcome.json文件不可以为空,即使你不想在文件中配置任何属性及代码,也需要加入一个空的{}
三、元素和样式
welcome.wxml文件中添加页面所需要的标签元素。
<view class="container">
    <image class="avatar" src="/images/avatar/avatar-1.png"></image>
    <text class="motto">hello world</text>
    <view catchtap="onTapJump" class="journey-container">
        <text class="journey">开启小程序之旅</text>
    </view>
</view>


接下来,我们需要添加css代码到welcome.wxss文件中,用于控制wxml页面元素的样式。
.container{
    display: flex;
    flex-direction:column;
    align-items: center;
}


保存后,我们就会看到页面发生什么变化了。如果有用到图片,请把图片存放在服务器上,让小程序通过网络加载图片资源。


扫描二维码,手机查看本帖
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

返回顶部
快速回复 发贴