小程序分享之(二)

271 阅读3分钟

申请完之后就开始写页面了,下面是项目的介绍以及一些页面写的东西:

一、项目介绍

1.必须要熟悉项目结构所代表的是什么:

    ①.json后缀的 JSON 配置文件
    ②.wxml后缀的 wxml 模板文件
    ③.wxss后缀的 wxss 样式文件
    ④.js后缀的 js 脚本逻辑文件

2.项目必须要有的几个文件:

    Project.config.json是整个开发工程的文件
    
    App.js就是写js文件
    
    App.json就是配置所有页面 
    
    Pages是配置页面的

Windows是设置整个页面的窗口的头部

App.css是整个项目的样式

3.Pages讲解

pages用于指定小程序由哪些页面组成,每一项都对应一个页面的路径+文件名信息。文件名不需要写文件后缀,框架会自动去寻找对于位的.json,.js,.wxml,.wxss四个文件进行处理。

数组的第一项代表小程序的初始页面(首页),小程序中新增/减少页面,都需要对pages数组进行修改。

如果想创建文件,直接在APP.json里的pages里直接写,文件即可自动生成

即可生成,删除要一个一个删除

二、Tabbar

写在app.json里windows下面的,最少两个,最多是五个

三、图片

放在跟pages同级目录下即可

四、页面的配置

① 点击哪个页面,头部的标题就是哪个页面的标题 在对应的文件里的.json文件里设置

就是这个标题改了

五、图片 image 缩放

主要用的是widthFix

小程序图片的默认宽度是300px,高度225px;

top 不缩放图片 只显示图片的顶部区域

    <image src="/img/2.jpg" mode="top" style="width:200px;height:100px"></image>

widthFix 宽度不变,高度自动化变化,保持原图宽高不变(用得最多)

    <image src="/img/2.jpg" mode="widthFix"></image>

aspectFill保持纵横比缩放图片,只保证图片的短边能完全显示出来,也就是说,图片通常只在水平垂直方向是完整的,另一个方向将会发生截取

    <image src="/img/2.jpg" mode="aspectFill"></image>

aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来,也就是说,可以完整的将图片显示出来

    <image src="/img/2.jpg" mode="aspectFit"></image>

scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image元素

    <view class="myred c1">
      <image src="/img/2.jpg" mode="scaleToFill"></image>
      <image src="/img/2.jpg"></image>
    </view>

六、.If语句的判断

七、If….else

八、if-else 在html的表示

① 在js文件的data声明一个变量

② 在html文件去判断这个shuzi:4 符合要求则显示对应的答案

九、图片的引用 if不是在本地(两种方法)和在本地

① 直接写图片链接

② 在data声明变量去调用

然后在html去调用

Else图片在本地,直接写路径

十、获取远程图片

① 首先写好了网址却发现一个报错

解决办法:

第一. 右上角

第二. 点击详情出现一个页面

第三. 勾选不校验

② 把返回的图片赋值给data里声明的变量(ad_img2,声明可改变看自己的需要去写)

出现了报错

解决的办法,在onLoad: function (options) {里面,先用var that = this,赋值的时候this改为that即可}

③ 在html绑定声明的变量

好啦,今天分享的就是这十点啦,未完待续。。