3

1.微信小程序创建项目。

文件结构:小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 文件 必填 作用 app.js 是 小程序逻辑 app.json 是 小程序公共设置 app.wxss 否 小程序公共样式表 一个小程序页面由四个文件组成,分别是: 文件类型 必填 作用 js 是 页面逻辑...

clipboard.png

2.项目启动页

*.json:app.json文件来对微信小程序进行全局配置,决定页面文件的路径、主文件入口、窗口表现、设置网络超时时间、设置多 tab 等,不允许有注释。
配置地址:https://mp.weixin.qq.com/debu...

最外面app.json配置路径默认首页:(路径不需要写文件类型,一个文件夹中的文件都只为一个页面服务,在编写外面css样式中也无需在wxml中引入wxss文件)

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

pages数组中第一项为启动页面

*.json创建bug:json文件不能为空,至少保留{}
在配置的默认首页中的welcome.wxml文件中编写小程序的tag

welcome.xwml

<view>
    <image src="./image/xx.png" style="width:200rpx;height:200rpx">
    </image>
    <text>第一个小程序</text>
</view>

view:相当于html的div容器
image:等同于img
text:存放文字的标签,如果不加,在手机上无法长按选中文字。
rpx单位:和设计图等同大小即可,大小是px的一半。
page:生成页面后会默认的给最外面加个page标签,相当于html中的body

welcome.wxss

.user-main{
    text-align:center;
}
.user-tx{
    width:200rpx;
    height:200rpx;
    border-radius:50%;
}

什么时候写行内样式,什么时候写wxss中?
在写静态固定的样式时写到外部引入中,经常变化或与行为发生互动的样式可以写到行内。

3.组件-轮播(swiper)

<swiper autoplay="true">
   <swiper-item>轮播一</swiper-item>
   <swiper-item>轮播二</swiper-item>
   <swiper-item>轮播三</swiper-item>
</swiper>

设置轮播图片大小先设置swiper大小然后设置图片大小。

属性
autoplay:自动播放轮播
indicator-dots:是否有点
更多属性参考:http://suo.im/1QzaIi


a2774206
1.8k 声望26 粉丝

You can't forget your role at all times