微信小程序

 

微信小程序开发框架-------wxml

1.数据绑定

2.列表渲染

3.条件渲染

4.模板引用

js文件

Page({
  data: {
    message: "hello,world",
    items: [{
        name: "商品A"
      },
      {
        name: "商品B"
      },
      {
        name: "商品C"
      },
      {
        name: "商品D"
      },
      {
        name: "商品A"
      }
    ],
    condition: Math.floor(Math.random() * 3 + 1),
    item: {
      name: "张三",
      phone:"18888888888",
      address:"中国"

    }
  }
})

wxml文件

<view>HelloWorld</view>
<!-- 绑定数据 -->
<view>
  <text>{{message}}</text>
</view>
<!-- 列表渲染 -->
<view>
  <block wx:for="{{items}}" wx:for-item="item" wx:key="index">
    <view>{{index}}:{{item.name}}</view>
  </block>
</view>
<!-- 条件渲染 -->
<view>今天吃什么？</view>
<view wx:if="{{condition===1}}">
  饺子
</view>
<view wx:elif="{{condition===2}}">
。。。。。。。米饭
</view>
<view wx:else>
  面食
</view>
<!-- 模板 -->
<template name="tempItem">
  <view>
    <view>收件人：{{name}}</view>
    <view>联系方式：{{phone}}</view>
    <view>地址：{{address}}</view>
  </view>
</template>
<template is="tempItem" data="{{...item}}"></template>

import引用模板内容不引用其它

include引用文本内容不渲染模板内容

选择器

wxs

视图容器组件：view 、scroll-view 、swiper 、movable-view 、cover-view

基础内容组件：icon 、text 、rich-text 、progress

表单组件：button 、picker 、checkbox 、picker-view 、form 、radio 、input 、switch 、label 、text-area

导航组件：navigator

媒体组件：audio 、video 、camera 、image 、live-player 、live-pusher

//传入参数，获取一个有参数值个字符的字符串
var randomString = function(len) {
  len = len || 32;
  var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
  var maxPos = $chars.length;
  var pwd = '';
  for (let i = 0; i < len; i++) {
    pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return pwd;
}