小程序学习

template

index.wxml里导入模板
    <import src="../item/item.wxml"/>
    <template is="staffName" data="{{...staffA}}"></template>

item.wxml写入模板
    <template name="staffName">
      <view>
        FirstName: {{firstName}}, LastName: {{lastName}}
      </view>
    </template>

import的作用域与include

1.
  import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。

  C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

2.
  include可以将目标文件除了<template/>的整个代码引入，相当于是拷贝到include位置

数据绑定

1.
    用扩展运算符 ... 来将一个对象展开
2.
    花括号和引号之间如果有空格，将最终被解析成为字符串
    <view wx:for="{{[1,2,3]}} ">
      {{item}}
    </view>
    等同于
    <view wx:for="{{[1,2,3] + ' '}}">
      {{item}}
    </view>

列表渲染

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>
************
使用 wx:key 来指定列表中项目的唯一的标识符。  wx:key="{{index}}"
************

条件渲染

1.block
    <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
2.v-if与hidden
    wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。  
3.  wx:if     wx:elif    wx:else

模板

1.定义模板
    使用name属性，作为模板的名字。然后在<template/>内定义代码片段。
2.使用模板
    使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入
        <template is="msgItem" data="{{...item}}"/>
    is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：
        <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>

事件

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

兼容处理

if (wx.openBluetoothAdapter) {
  wx.openBluetoothAdapter()
} else {
  // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
  wx.showModal({
    title: '提示',
    content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
  })
}

创建一个tab

**app.json里写入**

"tabBar": {
    "color": "#747575",
    "selectedColor": "#ff927c",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
        {
            "pagePath": "pages/index/index/index",
            "iconPath": "image/img_wyl/nav1.png",
            "selectedIconPath": "image/img_wyl/nav11.png",
            "text": "首页"
        }
    ]
},

wxss

1.
    rpx  自适应
    640尺寸  
    字体：24rpx  相当于1.2rem
    宽高所有的尺寸都可以设置
2.
    li 设置为display:block

wxml

1. 
    input后必须加"/"，按照规则来写，有空格会报错   
2.
     <text class="{{userInfo.gender==1 ? 'sex_man' : 'sex_woman'}}">  
     <p class="jiazai  {{type.jiazai==1?'jiazai_show':''}}">老板别着急，正在给你找</p>

公共js

const config = require("config.js");

function formatTime(date) {
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()

  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()


  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

//网络请求
function request(parameters = "",success, method = "GET", header = {}) {
  wx.request({
    url: config.BaseURL +(method == "GET" ? "?" : "")+ parameters,
    data: {},
    method: method, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
    header: header ? header : "application/json", // 设置请求的 header
    success: function(res){
      console.log(res);
      success(res);
    },
    fail: function() {
      // fail
    },
    complete: function() {
      // complete
    }
  })
}

//HUD 
//成功提示
function showSuccess(title = "成功啦", duration = 2500){
  wx.showToast({
      title: title ,
      icon: 'success',
      duration:(duration <= 0) ? 2500 : duration
  });
}
//loading提示
function showLoading(title = "请稍后", duration = 5000) {
  wx.showToast({
      title: title ,
      icon: 'loading',
      duration:(duration <= 0) ? 5000 : duration
  });
}
//隐藏提示框
function hideToast(){
  wx.hideToast();
}

//显示带取消按钮的消息提示框
function alertViewWithCancel(title="提示",content="消息提示",confirm,showCancel="true"){
  wx.showModal({
    title: title,
    content: content,
    showCancel: showCancel,
    success: function(res) {
      if (res.confirm) {
        confirm();
      }
    }
  });
}
//显示不取消按钮的消息提示框
function alertView(title="提示",content="消息提示",confirm){
  alertViewWithCancel(title,content,confirm,false);
}

module.exports = {
  formatTime: formatTime,
  request: request,
  showSuccess: showSuccess,
  showLoading: showLoading,
  hideToast: hideToast,
  alertViewWithCancel: alertViewWithCancel,
  alertView: alertView
}

input的值获取

var username = e.detail.value.username;
 //html
<form bindsubmit="formSubmit">
    <input name="username" maxlength="18" placeholder="输入用户名"></input> 
</form>// 将所需的提交数据用form标签包起来
<button class="qr_btn"   formType="submit">下一步</button>
//js
 formSubmit:function(e){
    console.log(e.detail.value)
}

获取用户信息

var app = getApp();
data:{userInfo:{}}
onLoad: function (options) {
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function (userInfo) {
        //更新数据
        that.setData({
            userInfo: userInfo
        })
        console.log(userInfo)
    })
}

微信小程序html解析

1.