小程序之基础介绍

小程序文件结构与传统web对比

	微信小程序	传统web
结构	WXML	HTML
样式	WXSS	CSS
逻辑	Javascript	Javascript
配置	JSON	无

项目基本目录

模板语法

数据绑定

<view> {{ sayHello }} </view>

Page({
  data: {
    sayHello: 'Hello MooZiXiao!'
  }
})

组件属性

<view id="item-{{id}}"> </view>

Page({
  data: {
    id: 0
  }
})

运算

三元运算

<view class="{{isFlag ? 'cr_red' : 'cr_grey'}}"> 字体颜色切换 </view>

算数运算

<view> {{a + b}} + {{c}} + d </view>

逻辑判断

<view wx:if="{{data.length > 0}}"></view>

渲染

列表渲染 — wx:for

项默认的变量是 item 可用 wx:for-item 指定数组项的变量名

默认下标变量是 index 可用 wx:for-index指定数组当前下标名

wx:key 是用来提高数组渲染的性能

wx:key 绑定的值 有以下方式：

1. string 类型，表示 循环项中的唯一属性 如

   data:[{id:0,name:"moo"},{id:1,name:"zi"}]
   
   wx:key="id"
   

2. 保留字 *this ，意思是 item 本身 ，*this 代表的必须是 唯一的字符串和数组。

   list:[1,2,3,4,5]
   
   wx:key="*this"
   

代码：

<view wx:for="{{list}}" wx:key="id">
  {{index}}: {{item.name}}
</view>

<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

Page({
  data: {
    list: [{
      id:0,
      name: '蜡笔没有小新',
    }, {
      id:1,
      name: '小新没有蜡笔'
    }]
  }
})

条件渲染

wx:if

在框架中，使用 wx:if="{{show}}" 来判断是否需要渲染该代码块：

  <view wx:if="{{false}}">1</view>
  <view wx:elif="{{true}}">2</view>
  <view wx:else>3</view>

hidden

<view hidden="{{show}}"> True </view>

类似 wx:if

频繁切换 用 hidden

不常使用 用 wx:if

事件绑定

通过 bind 关键字来实现的

（ bindtap bindinput bindchange … ）

<input bindinput="handleInput"/>

handleInput: function(e) {
    console.log(e);
}

事件传值需通过标签自定义属性来设置

<view class="act_wrap" wx:for="{{actData}}" wx:key="id" bind:tap="handleJump" data-id="{{item.id}}">

handleJump: function (e) {
    const {id} = e.currentTarget.dataset;
},

WXSS

与 CSS 相比，WXSS 扩展的特性有：

• 响应式长度单位 rpx
• 样式导入

尺寸单位

rpx：根据屏幕宽度自适应

开发小程序时设计师可以 iPhone6 (750rpx) 作为视觉稿的标准。

使用步骤：

1. 确定设计稿宽度 pageWidth
2. 计算比例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth。
3. 在less文件中，只要把设计稿中的 px => 750/pageWidth rpx 即可。

样式导入

使用 @import 导入外联样式(只支持相对路径)。

如：

// normalize.css
page,view,text,swiper,swiper-item,navigator,image,button,input{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// app.wxss
@import "normalize.css";

注意： 小程序 不支持通配符 *

使用 less

原生小程序并不支持less，所以需要以下操作：

1.在vs code 中，安装插件 Easy LESS

2.在 vs code 的设置中加入以下配置

// setting.json
"less.compile": {
    "outExt": ".wxss"
},

3.使用，新建 less文件，然后正常编辑即可。

常见组件

view

text

rich-text
接收图片过大处理

1.
res.data.introduce = res.data.introduce.replace(/\<img/gi,  '<img class="rich-img"');

.rich-img {
    max-width: 100%;
}

2.屏幕宽度
wx.getSystemInfo({
    success: function(res) {
        res.data.introduce = res.data.introduce.replace(/\<img/g, '<img style="width:'+res.windowWidth+'px;display:block;"');
        _this.setData({
            
        });
    }
})

button

image

navigator

icon

swiper

radio

checkbox …

自定义组件 ——— 标签页切换

思想

所需文件：pages/index、components/commonTab

在 components/commonTab 中创建组件

在 pages/index 的 json 文件中进行组件的引用声明，并且提供对应的组件名和组件路径且在 wxml 使用

在 pages/index 文件夹中的 js 文件 编写所需的标签数据及索引（tabsName，index）且在 wxml 传到 组件中

在 components/commonTab 的 js的 properties 声明属性（tabsName，currentIndex），在wxml 文件中编写组件的模板（需用到 slot 插槽），由于标签切换需要更改 currentIndex，则通过 triggerEvent 事件传值，最后在 wxss 文件中写入组件样式

在 pages/index 的 wxml 文件中获取组件传来的事件并在 js 更改 index

代码示例

components/commonTab

// components/commonTab/index.wxml
<view class="tabs-name">
    <view class="name {{currentIndex === index ? 'active' : ''}}" wx:for="{{tabsName}}" wx:key="name"
        data-index="{{index}}" bindtap="bindChangeIndex">{{item.name}}</view>
</view>
<view class="tabs-content">
    <slot></slot>
</view>

// components/commonTab/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabsName: {
      type: Array,
      value: []
    },
    currentIndex: {
      type: Number,
      value: 0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    bindChangeIndex (e) {
      const {index} = e.target.dataset;
      this.triggerEvent('getIndex', {index})
    }
  }
})

// components/commonTab/index.css
.tabs-name {
    display: flex;

}
.tabs-name .name {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80rpx;
}
.tabs-name .active {
    border-bottom: solid 2rpx tomato;
    color: tomato
}

pages/index

{
  "usingComponents": {
    "commonTab": "../../components/commonTab/index"
  },
  "navigationBarTitleText": "tab引用页面"
}

使用组件

<commonTab tabsName="{{tabsName}}" currentIndex="{{index}}" bindgetIndex="getIndex"></commonTab>
<view class="tab-content">
    <view wx:if="{{index === 0}}">
        0
    </view>
    <view wx:elif="{{index === 1}}">
        1
    </view>
    <view wx:else>
        2
    </view>
</view>

//index.js
Page({
  data: {
    tabsName: [
      {
        name: '首页'
      },
      {
        name: '资讯'
      },
      {
        name: '我的'
      },
    ],
    index: 0,
  },
  onLoad: function () {
  },
  getIndex(e) {
    this.setData({
      index: e.detail.index
    })
  }
})

图示

相关链接
小程序之fitler.wxs
小程序之使用Iconfont