微信小程序开发

一、安装

1、在https://developers.weixin.qq.com/miniprogram/dev/下载微信开发者工具

2、打开进入，选择项目目录

3、目录结构

app.js：入口文件

app.json：在里面注册页面后，会自动生成页面文件，当编译时默认打开pages下的第一个页面

二、使用

1、数据绑定

<text>{{ text }}</text>                               // first.wxml中，用{{}}来绑定
<button type="default" > default </button>         
<button type="primary" bindtap="btnClick"> primary </button>   // bindtap是绑定事件

data: {                                              // first.js中
    text: "this is a text"                           // 绑定text
  },

  btnClick: function () {                            // 注册点击事件
    this.setData({text: "按钮被点击了"})
  },

2、条件渲染

<view wx:if="{{ isShow }}">this is a</view>             // 当isShow==true的时候显示
<view wx:else="{{ isShow }}">this is b</view>

<view wx:for="{{ news }}">                             // 遍历数组，
  {{ index }}--{{ item }}                              // 下标和值，默认为index和item，修改使用wx:for-item="itemx"  wx:for-index="idx"
</view>

data: {
    text: "this is a text",
    isShow: true,
    news: ['aaa', 'bbb', 'ccc']
  },

  btnClick: function () {
    var show = this.data.isShow;
    this.setData({ text: "按钮被点击了", isShow: !show})
  },

3、模板的使用：新建一个目录命名templates（随便取），新建header.wxml,footer.wxml

（1）使用include

在所需要使用的地方

<include src="../template/header" />               // 必须要有闭标签/>

header.wxml中

<text>this is a header</text>

（2）使用import：当模板中使用template标签，便不能使用include引入

<import src="../template/footer" />
<template is="name1" data="{{ t: 'data' }}" />             // 用来指定那个模板，is是模板name值，data是在模板中通信

footer.wxml

<template name="name1">this is name1--{{ t }}</template>

<template name="name2">this is name2</template>

4、事件

（1）点击事件：tap

（2）长按事件：longtap

（3）触摸事件：touchstart：开始    touchend：结束   touchmove：移动   touchcancel：结束，非正常结束，比如点下去突然来个电话，触摸事件被打断

（4）其他：submit input

（5）事件绑定：

1）bind绑定：会冒泡

2）catch绑定：不会冒泡

5、小程序配置详解

（1）页面配置app.json下的pages

"pages":[
    "pages/first/first",               // 第一个为默认编译的首页
    "pages/index/index",
    "pages/logs/logs"
  ],

（2）页面配置app.json下的window

"window":{
    "backgroundTextStyle":"light",                   // 背景文本颜色
    "navigationBarBackgroundColor": "#fff",          // 导航条背景颜色
    "navigationBarTitleText": "WeChat",              // 导航条标题内容
    "navigationBarTextStyle":"black"                 // 导航条字体颜色
  }

（3）底部菜单

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",        // 如果pages中的第一个路径不在tabBar中，tabBar不会显示
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      } 
    ]
  }

（3）请求超时

"networkTimeout": {
    "request": 10000,           // http请求10秒
    "downloadFile": 10000       // 下载文件10秒
  },

（4）debug

"debug": true              // 会输出一些日志

（5）页面配置，在每个页面里面新建一个与页面同名的json文件，目的是：覆盖app.json中的全局配置

6、小程序生命周期app.js中：onLaunch()：在开始   onShow()：前台运行    onHide()：后台运行

7、页面跳转

（1）使用wx.navigateTo

redirect: function () {
    wx.navigateTo({
      url: '../first/first'               // 注意：这里的url不能出现在底部菜单中，否则不会跳转
    })
  },

或者使用wx.redirectTo区别：navigateTo不关闭页面打开新的，redirectTo关闭页面

（2）使用组件

<navigator url="/pages/first/first?id=1&title=标题">切换 Tab</navigator>    // 也可以加open-type="redirect"

（3）传递数据

 wx.navigateTo({
      url: '../first/first?id=1'
    })

// first.js
onLoad: function (options) {
    console.log(options.id)
  },

三、实现登录：如果用户信息不存在，跳转到登录页面，否则进入用户信息页

//app.js
globalData: {
    userInfo: null
  }

// pages/user/user.js
var app = getApp()
onLoad: function (options) {
    if (app.globalData.userInfo == null) {   // 如果没有用户信息，去登录页
      wx.redirectTo({
        url: '/pages/login/login'
      })
    } else {
      this.setData({username: app.globalData.userInfo.username})
    }
  },

// 登录页
<input bindinput="usernameInput" />
<input bindinput="passwordInput" password="true" />
<button bindtap="login">登录</button>

// app.js
data: {
    username: null,
    password: null
  },
  usernameInput: function (event) {
    this.setData({username: event.detail.value})
  },
  passwordInput: function (event) {
    this.setData({password: event.detail.value})
  },
  login: function () {
    // 做验证之后
    app.globalData.userInfo = {username: this.data.username, password: this.data.password}
    wx.switchTab({
      url: '/pages/user/user'           // 因为底部菜单有这个路由，所以不能用navigateTo或redirectTo
    })
  },

四、布局

1、flex布局

<view class="contain">
  <view class="item">1</view>
  <view class="item">2</view>
  <view class="item">1</view>
</view>

.contain {
  width: 100%;
  height: 100%;
  background: red;
  display: flex;
  flex-direction: row;      /*水平排列，默认为row，垂直排列为column*/
  flex-wrap: wrap;     /*当一行排不开时换行，默认为nowrap不换行*/
  /* flex-flow: row wrap;   简写*/    /* align-items:center在纵轴上垂直 */
  justify-content: space-between;    /*对齐方式，居中对齐,默认flex-start左对齐，flex-end右对齐,space-around有左右margin值，space-between第一个没有左边距最后一个没有右边距*/
}
.item {
  width: 100rpx;     /*rpx会根据不同的分辨率，解析不同的大小*/
  height: 100rpx;
  background: blue;
  border: 1px solid #fff;
  flex-grow: 1;      /*当元素空间足够时，放大占据1，默认0不放大*/
  flex-shrink: 1;      /*当空间不够时，会缩小，默认为1*/
  flex-basis: 200rpx;      /*占据的宽度，本来为100rpx，现在是200rpx*/
  /* flex: 1 1 50rpx;    上面三个的简写*/
}

2、相对定位和绝对定位

五、小程序的api

1、wx.request()：发送请求

2、图片选择和调用微信拍照：wx.chooseImage()

3、上传文件：wx.uploadFile()   下载文件：wx.downloadFile()

4、数据缓存：wx.setStorage()：异步      wx.setStorageSync()：同步

5、获取地理位置：wx.getLocation()    wx.chooseLocation()：选择位置

6、获取网络类型：wx.getNetworkType()

7、获取系统信息：wx.getSystemInfo()

8、操作反馈：wx.showToast()：信息弹窗   wx.showModal()：确认弹窗    wx.showActionSheet()：在底部出现信息框

wx.showLoading()：加载弹窗