<笔记>小程序

小程序的代码构成

小程序项目里主要是4个文件:

.json后缀的JSON配置文件
.wxml后缀的WXML的模板文件
.wxss后缀缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件

下面是4种文件的介绍

JSON

JSON介绍：

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

JSON语法：

JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。

数字，包含浮点数和整数
字符串，需要包裹在双引号中
Bool值，true 或者 false
数组，需要包裹在方括号中 []
对象，需要包裹在大括号中 {}
Null

JSON 文件中无法使用注释。

app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

字段：

1.pages字段，页面路径，里面包含了所有小程序的页面路径，在pages里面增加路径，会自动生成新的页面

比如：pages/demo01/demo01 ,值得注意的是，第一个pages和第二个demo01是文件夹，最后一个demo01是项目文件。

2.window字段，里面义小程序所有页面的顶部背景颜色，文字颜色定义等。

其他配置项细节可以参考文档小程序的配置 app.json

页面配置 page.json

页面的配置文件，可以理解为局部变量

配置项细节可以参考文档页面配置

WXML 模板

WXML就是HTML，实现页面结构

更详细的文档可以参考 WXML

WXSS样式

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改，此外 WXSS 仅支持部分 CSS 选择器

更详细的文档可以参考 WXSS

JS逻辑交互

JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。

SITMAP

⽬录下的 sitemap.json ⽂件⽤于配置小程序及其页面是否允许被微信索引。

模板语法

text=span 行内元素不会换行
block 在渲染的时候，会把block移除掉，工具标签
view=div 块级元素会换行

WXML语法

数据绑定:

在js里data的数据，可以在wxml里面使用

数据绑定

列表渲染：

官方介绍：详细内容

for循环

在view里面，增加wx:for="{{list}}"，对其及进行遍历，item是里面的元素，index是索引。list可以是一个对象，也可以是一个数组。
属性/下标，用wx:for-item/index能指定下标的变量名。在循环嵌套的时候，需要注意!!!
wx:key可以提高渲染性能

条件渲染

If语句

<view wx:if="{{}}">

hidden语句

<view hidden> <view hideen="{{true}}">

原理：将其样式变为display:none，因此不能和display一起使用。

    <view style="display:none;">你好</view>
    <view hidden>看不见我！！</view>
    <view hidden="{{true}}">你也看不见我</view>
    <view hidden="{{flase}}">出现啦！！</view>

事件绑定

事件绑定：

在控件后面增加,bindxxx,比如

<input bindinput="handleInput"/>
<button bindtap="handleButton"">+</button>

传参：

不能直接传参数，但是可以设置属性的值，比如data-x={{1}}，这个x是可以不存在的，他会在事件源里的currentTarget.dataset.x，js就可以直接调用。

传参时的注意事项：

今天遇到了一个bug，就是数据设置的时候，会自动转化成字符串，因此可以通过（data-0)，将字符串转成数字。

事件函数：

写在page({里面})。格式为

  函数名:function(e//这个是事件源){
  }

数据设置：

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

注意：

直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。

代码：

  handleInput:function(e){
      this.setData({
        num:e.detail.value
      })
  }

属性名	类型	默认值	说明
selectabl(已废弃)	Boolean	false	文本是否可选
decode	Boolean	false	是否解码
user-select	string		文本是否可选，该属性会使文本节点显示为 inline-block

值	说明
scaleToFill	填充，拉满
aspectFit	等比例缩放，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。因为长边能够显示，那么短边一定也能够显示的出来了。
aspectFill	保持纵横比缩放图片，只有短边能完全显示出来，图片通常另一个方向将会发生截取。
top/bottom/..	绝对定位，具体查看文档
width/height Fix	缩放模式，表示宽度/高度不变（指定的值），另外一个自动比例缩放。

swiper轮播组件

每一个轮播的iten只能是<swiper-item></swiper-item>
<swiper>标签存在默认样式
1. width 100%
2. heitght 150px (image也存在默认320*240)
3. 图片放进去可能会很丑，因此要根据图片计算图片缩放后的高度从而调整swiper 高度，在样式里设置的时候需要用calc(计算等式)来赋值。
4. 图片的属性也要是设置为宽度不变，高度等比例变化。即<image mode=widthFix>
5. ```
/* 计算 图片缩放以后的宽高 */
swiper{
  height:calc(100vw*(280/520));
}
```

nevigator超链接

属性	说明	默认值
target	在哪个小程序上跳转，默认是当前小程序,用miniProgram可以跳转其他小程序上	self
open-type	跳转方式
url

open-type

值	说明
nevigate	保留当前页面，跳转到应用内的某个页面。不能跳到abbar 页面。
redirect	关闭当前页面，跳转到应用内的某个页面。不能跳 tabbar 页面。

还可以专门跳转到tabbar页面的，更多方式访问官方文档.....

使用方式：

navigator open-type="navigate" url="/pages/demo02/demo02">

注意：url跳转的路径，用的是斜杆，而不是反斜杠，和网页链接一样

rich-text富文本标签（不太理解）

属性：

nodes：

1.接收标签字符串

2.接收标签数组
标签字符串（一大堆标签）

<rich-text nodes="{{字符串}}"}></rich-text>

button

button 开放能力：open-type

icon

属性：很多

radio

需要在外面嵌套radio-group，其可以用bindchange 来绑定事件。
<radio>选项里面的value值，会被bindchange获取。

checked-box

类似radio标签，而且都需要搭配

特点：复选框组有一个bindchange绑定事件，返回的value值，是一个数组，数组的内容就是已选的复选框的value值的数组。

案例运用

需求:利用radio checked-box实现选中和文本同步，选中的内容同步文本的内容。

可以利用循环做列表i渲染功能，并且边渲染，边循环，边给对应的复选框添加相应的value值。
在js里，获取value数组，利用setData函数，给自定义的数组赋值，然后调用数组，在wxml里显示i出来。

wxml

<view>
<checkbox-group bindchange="getMessage">
<checkbox wx:for="{{list}}" value="{{item.nickName}}">//边循环 ，边赋value值
  {{item.name}}
</checkbox>

<view>
  你选中的人的昵称是：
  <view wx:for="{{dataList}}"> 
      {{item}}
  </view>

  data: {
    list:[
      {
        name:"123",
          nickName:'123',
          age:5
      },
      {
        name:"111",
        nickName:'222',
        age:6
      }
    ],
    dataList:[]
  },
    getMessage(e){
    //返回的是一个数组
    this.setData({
      dataList:e.detail.value
    })
  }

自定义组件

创建步骤

在component里增一个包，包名为组件名称，右键增加自定义组件，会生成4个基础文件。
需要在自定义的文件里的json设置

conponent:true
在需要使用自定义组件页面的json文件下usingComponents引用自定义文件，例如：
```
  "usingComponents": {
  "Tabs":"../../components/chatroom/Tabs/Tabs"
  }
```
在对应的页面中可以直接使用了

修改组件结构

posted @ 2021-03-04 23:22 Fanxuwei 阅读(138) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Fanxw