目录结构

|--pages    小程序页面目录
||--index    小程序页面1
|||--index.js    页面逻辑文件
|||--index.json    页面配置文件
|||--index.wxml    页面结构文件 也就是html
|||--index.wxss    页面样式文件    也就是css
||--logs    小程序页面2 初始化可以删
|--utils    工具集合目录 初始化可以删
|--app.js    小程序的逻辑
|--app.json    小程序的公共配置
|--app.wxss    小程序的公共配置
|--project.config.json    工具配置文件
|--sitemap.json    索引配置

app.js

{
  "pages":[// 页面路径配置，配置后页面才能找到 如果想创建目录可以在下面直接输入地址会自动创建
    "pages/index/index",
    "pages/logs/logs",
     "pages/test/test"//手动输入后保证小程序会自动创建目录
  ],
  "window":{//窗口设置
    "backgroundTextStyle":"light", 下拉loading样式 默认 dark
    "navigationBarBackgroundColor": "#fff",//导航背景色
    "navigationBarTitleText": "Weixin",//标题内容
    "navigationBarTextStyle":"black"//标题颜色
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

通过app.js设置tabBar

全局配置中查看  
"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/templated/templated",
      "text": "日志"
    }]
  },

const app = getApp() 获取App实例 可以获取app.js中定义的内容

尺寸问题

WXSS相对于传统的CSS 提供了一种rpx的尺寸单位 可以自适应屏幕
屏幕规定宽度为750rpx 设置这个值就可以满宽度
如果要分离出独立样式表 可以通过@import 载入即可
@impor “./temp/temp.wxss”

数据绑定

数据绑定

数据绑定和vue中数据绑定是一样当都是通过data进行数据的设定 ,通过视图层响应输出

Page({
  data: { //定义
    id:"1",
    name:"nihao"
  },
})
显示
<view id="{{id}}">{{name}}</view> 可以写在标签内部 也可以写在标签外部
进行表单选中，运算，字符串连接，三目运算
<checkbox checked="{{flag}}">选中</checkbox>
<checkbox checked="{{flag?true:false}}">选中</checkbox>
对象的和数组的获取
<view>{{obj.name}}</view>
<view>{{obj[0]}}</view>

双向绑定

<input value="{{value}}" /> 数据绑定是单向的
双向绑定需要添加一个前缀model:
<input model:value="{{value}}" />

条件和列表渲染

条件渲染 wx:if

<view wx:if="{{flag}}">{{obj.name}}</view> flag为true是显示 相当于if
<view wx:elif="{{flag>5}}">{{obj.name}}</view> 相当于 else if
<view wx:else">{{obj.name}}</view> 相当于 else
如果想通过wx:if对多个组件进行判断可以通过<block>标签 block标签是无状态的不会进行任何渲染
<block wx:if="{{flag}}">
  <view>1</view>
  <view>2</view>
</block>

列表渲染 wx:for

arr:[1,2,3,4,5]
<view wx:for="{{arr}}">
索引：{{index}}---数值：：{{item}} 默认index是获取索引 item是获取值
</view>
单独设置索引变量和值变量
<view wx:for="{{arr}}" wx:for-index="idx" wx:for-item="obj">
索引：{{idx}}---数值：：{{obj}}
</view>
同时循环多个组件还是使用block标签
<block wx:for="{{arr}}" wx:for-index="idx" wx:for-item="obj">
  <view>{{obj}}</view>
  <view>{{obj}}</view>
 </block>

wx:key

在循环的过程中和vue一样也是需要设置key的设置方式

可以设置对象中的id 如果没有id可以通过保留关键字*this设置
<block wx:for="{{arr}}" wx:for-item="obj" wx:key="*this">
  <view>{{obj}}</view>
  <view>{{obj}}</view>
 </block>

模板

模板的使用

<!-- 创建模板 -->
<template name="test">
  <view>1</view>
  <view>2</view>
</template>
<!-- 使用模板 -->
<template is="test"></template>

data中的数据在模板中是没办法直接使用的使用方式如下

obj: [{
      id: "1",
      name: "zhangsan"
    },{
      id: "2",
      name: "lisi"
    }]
<template name="test">
  <view>{{id}}</view>
  <view>{{name}}</view>
</template>
<!-- 使用模板 -->
<template is="test" data="{{...obj}}" wx:for="{{obj}}"></template>
需要通过data将对象直接传过去在模板中直接获取对象中的值  ...对象名固定格式

模板的引用

<!-- 将模板写到外面的wxml中 -->
<import src="../temp/temp.wxml">
 <!-- 使用模板 is="temp"外面模板name定义的值 -->
<template is="temp" data="{{..obj}}"></template>

事件绑定

使用:bind:事件名 来绑定事件—>

注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如 form 的submit事件，input 的input事件，scroll-view 的scroll事件，(详见各个组件)

{{flag}}
<view bindtap="clickD">点击</view>
Page({
  /**
   * 页面的初始数据
   */
  data: {
    flag:1,
  },
  clickD(event){ //通过获取event可以直接获取事件对象
   console.log("11")
   this.setData({//修改Data中的值
     flag:3
   })
  },
})

阻止事件冒泡

除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。
例如在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。
<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

互斥事件绑定

使用 mut-bind 来绑定事件。一个 mut-bind 触发后，如果事件冒泡到其他节点上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发。
换而言之，所有 mut-bind 是“互斥”的，只会有其中一个绑定函数被触发。同时，它完全不影响 bind 和 catch 的绑定效果。
例如在下边这个例子中，点击 inner view 会先后调用 handleTap3 和 handleTap2 ，点击 middle view 会调用
<view id="outer" mut-bind:tap="handleTap1">
  outer view
  <view id="middle" bindtap="handleTap2">
    middle view
    <view id="inner" mut-bind:tap="handleTap3">
      inner view
    </view>
  </view>
</view>

事件捕获

触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。
在下面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。
<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>
如果将上面代码中的第一个capture-bind改为capture-catch，将只触发handleTap2。
<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

组件

通用属性

<button    id="test" 设置id
                class="test" 设置class名
                style="color:red" 设置样式
        hidden 设置组件隐藏
                data-name="neirong" 设置自定义值 data-自定义属性="自定义值" 获取方法是 event.target.dataset.自定义属性
                bind:tap="clickD" 设置点击事件
          >
          组件
</button>

所有的属性值最好在data中设置 或者在{{true}}中设置否则可能出现不能使用的问题

view

相当于div组件

scroll-view

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)

<scroll-view style="height:200rpx" scroll-y="true" scroll-with-animation="true" scroll-with-animation="true">
  <view style="height:200rpx;background:red">1</view>
  <view style="height:200rpx;background:blue">2</view>
  <view style="height:200rpx;background:yellow">3</view>
  <view style="height:200rpx;background:green">4</view>
  <view style="height:200rpx;background:#ddf">5</view>
</scroll-view>

swiper

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

<swiper autoplay="{{flag}}" interval="1000">
  <swiper-item item-id="1">1</swiper-item>
  <swiper-item item-id="2">2</swiper-item>
</swiper>

text

文本 相当于span标签

rich-text

富文本 解析html文本

nodes

现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点 元素节点：type = node*

文本节点：type = text*

icon

图标。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

progress

进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

button

按钮。

checkbox

多选项目。需要和label 和 checkbox-group联合使用

label

用来改进表单组件的可用性。
使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。 for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。 目前可以绑定的控件有：button, checkbox, radio, switch。

checkbox-group

checkbox-group bindchange="changeD">
  <!-- 如果没有label点击复选框文字是无法选中的-->
  <label>
    <checkbox value="1"></checkbox>复选框
  </label>
</checkbox-group>
  changeD(event){
    console.log(event.detail.value) //event.detail.value获取选中的值的数组
  },

radio

单选项目。和多选框一样需要和label 和 radio-group联合使用

radio-group

<radio-group bindchange="radioD">
  <label>
    <radio value="1">男</radio>
    <radio value="2">女</radio>
  </label>
</radio-group>
 radioD(event){
    console.log(event.detail.value) //event.detail.value获取选中的值
},

switch

开关选择器。 就是checkbox组件只不过是改变了样式

slider

滑动选择器。

input

输入框。该组件是原生组件

textarea

多行输入框。该组件是原生组件

picker

从底部弹起的滚动选择器。详情查看API 具体使用观看文档

例如:普通选择器：mode=selector

<picker mode="selector" range="{{['北京','广州']}}" value="{{1}}" disabled="{{false}}"> //value是数组的索引默认选中
  <view>选择</view> 显示的信息
</picker>

picker-view

嵌入页面的滚动选择器。其中只可放置 picker-view-column组件，其它节点不会显示

picker-view-colum

滚动选择器子项。仅可放置于picker-view中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致

<picker-view style="width:750rpx;height:200px" value="{{[1,1]}}">
  <picker-view-column>
    <view>1</view>
    <view>1</view>
  </picker-view-column>
  <picker-view-column>
    <view>1</view>
    <view>1</view>
  </picker-view-column>
</picker-view>

form

表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。
当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

navigator

页面链接。页面跳转组件

<navigator url="/pages/index/index">跳转</navigator>

API

API一般都包含三个回调函数success、fail和complete

界面

交互API

wx.showToast 显示消息提示框
wx.showModal 显示模态对话框
wx.showLoading 显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
wx.showActionSheet 显示操作菜单

导航栏

wx.showNavigationBarLoading 在当前页面显示导航条加载动画
wx.setNavigationBarTitle 动态设置当前页面的标题
wx.setNavigationBarColor 设置页面导航条颜色
wx.hideNavigationBarLoading 在当前页面隐藏导航条加载动画
wx.hideHomeButton 隐藏返回首页按钮

TabBar

wx.showTabBarRedDot 显示 tabBar 某一项的右上角的红点
wx.showTabBar 显示 tabBar
wx.setTabBarItem 动态设置 tabBar 某一项的内容
wx.setTabBarBadge 为 tabBar 某一项的右上角添加文本

网络

wx.request 发起 HTTPS 网络请求

wx.request({
  url: 'example.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  method:"get" //支持get post put delete
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

wx.downloadFile 下载文件资源到本地
wx.uploadFile 将本地资源上传到服务器

图片 视频 音频查看API

音频

wx.createInnerAudioContext 创建内部 audio 上下文
wx.createAudioContext 创建 audio 上下文 AudioContext 对象。
AudioContext.setSrc(string src)设置音频地址
AudioContext.play()播放音频。
AudioContext.pause()暂停音频。
AudioContext.seek(number position)跳转到指定位置

视频

wx.createVideoContext 创建 video 上下文
wx.openVideoEditor 打开视频编辑器
wx.saveVideoToPhotosAlbum 保存视频到系统相册
需要结合video结合使用

图片

wx.chooseImage 从本地相册选择图片或使用相机拍照
wx.getImageInfo 获取图片信息
wx.saveImageToPhotosAlbum 保存图片到系统相册

地图

wx.createMapContext 创建 map 上下文 MapContext 对象 需要结合map标签
MapContext.fromScreenLocation 获取屏幕上的点对应的经纬度，坐标原点为地图左上角。

定位

wx.getLocation 获取当前的地理位置、速度
wx.openLocation 使用微信内置地图查看位置
wx.chooseLocation 打开地图选择位置

缓存

wx.setStorage 将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容

wx.setStorage({
  key:"key",
  data:"value"
})

wx.removeStorage 从本地缓存中移除指定 key
wx.getStorage 从本地缓存中异步获取指定 key 的内容。

路由

wx.redirectTo 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.navigateTo 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
wx.navigateBack 关闭当前页面，返回上一页面或多级页面
wx.reLaunch 关闭所有页面，打开到应用内的某个页面
wx.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面