小程序基础

页面结构：

xxx.js 业务逻辑

data:页面的初始数据

onLoad(options) :生命周期函数--监听页面加载

onReady:生命周期函数--监听页面初次渲染完成

onShow:生命周期函数--监听页面显示

onHide:生命周期函数--监听页面隐藏

onUnload：生命周期函数--监听页面卸载

xxx.json页面的配置

app.json全局配置：

pages：存放页面的路径，首页就是第一个路径

window：窗口信息

全局数据：（app.js）

//定  
globalData: {
    userInfo: null,
    outflow:100
  }

//取
var app = getApp();
app.globalData.outflow;

url?查询传递参数
onLoad(option)
//本地存储传参
wx.setStorageSync(k,v)wx.getStorageSync(k)

常用全局方法：

onReachBottom：触底
onPullDownRefresh：下拉
onShareAppMessage(){return {url,title,imageUrl}}：分享
onShareTimelime()：分享朋友圈
onAddToFavorites()：收藏
onPageScroll({scrollTop:xxx}){}：页面滚动

页面配置

{
    "enablePullDownRefresh": true, //允许下拉刷新
    "backgroundTextStyle": "dark", //背景文字颜色（下拉才能看见）
    "backgroundColor": "#f30", //背景颜色（下拉才能看）
    "usingComponents": {}
}

xxx.wxml页面的模板

基础组件

view 容器,text 文本,image 图片,input 表单,template 模板

navigator跳转

url跳转的页面

<navigator url="../home/home">home</navigator>

open-type打开类型

navigate -默认跳转
redirect-重定向(原页面的历史记录被跳转页面替换)
switchTab-跳转到底部栏对应页面
navigateBack-返回
relaunch-重置
exit-退出

渲染指令：

文本渲染指令:

<view>{{msg}}</view>

便利：

<view wx:for="{{msg}}" wx:key="index">{{index+1}}---{{item}}</view>
//index遍历元素的下标item代表变量的元素

自定义item与index(多重遍历)

<view wx:for="{{obj}}" wx:key="index">
  {{item}}
  <view wx:for="{{item}}" wx:for-item='sub' wx:for-index='inb' wx:key="ind">{{sub}}</view>
</view>

if判断

  data: {
    scre:80,
  },

<view wx:if="{{scre>=90}}">厉害</view>
<view wx:elif="{{scre>=80}}">可以</view>
<view wx:else>一般</view>

include:把文件单纯拷贝过来

<include src="url">

importtemplate

//定义template
<template name="user">用户名：{{name}}</template>
//使用
<import src="url">
<template name="user"  data={{...list[0]}}>

事件：

被点击：bindatap='函数名'

tapHd() {
    //弹出一个提示框, 等待一会自动消失
    wx.showToast({
      title: '我爱小程序',
      icon: 'none'
    })
  },

<view><button type="primary" bindtap="tapHd" size="mini">响应时间</button></view>

bindinput="" :表单发生变化

 data: {
   msg:'你好!'
 },
inputHd(e){
    console.log(e);
    this.setData({msg:e.detail.value})
  },

<view><input value="{{msg}}" bindinput="inputHd"/></view>

bindconfirm="" :确认键

bindlongPress=“”:长按

实现传参

  data: {
    msg:'你好!'
  },  
sayHi(e) {
    console.log(e);
    wx.showModal({
      title:e.target.dataset.msg
    })
//表单的值:e.detail.value

<view><button type="primary" bindtap="sayHi" data-msg="不好" size="mini">你好！</button></view>

表单的双向绑定

 data: {
   msg:0
 },
inputHd(e){
   this.setData({msg:e.detail.value})
}

<input value="{{msg}}" bindinput="inputHd">

xxx.wxss页面样式

api 在小程序的

wx.request({
url：'',
method:'',
header:'',
success:'',
fail:'',
complete:''
})

wx.request({
      url: 'http://dida100.com/mi/list.php?page=' + that.data.page,
      method: 'GET',
      success(res) {
        var list = that.data.list;
      }
    })

界面类

//提示
wx.showToast({title,icon})
//确认框
wx.showModal({title,content,success,fail}))
//显示加载提示
wx.showLoading()

数据缓存

//存
wx.seetStoreageSync(key,value)
//取
wx.getStorageSync(key)

路由

//普通跳转
wx.navigateTo({url})
//重定向
wx.redirectTo({url})
//底部栏跳转
wx.switchTab({})
//返回
wx.navigateBack()
//重启
wx.reLaunch({url})
<!-- 底部导横栏跳转 -->
<navigator url='/pages/home/home' open-type="switchTab">home</navigator>

open-type：
navigate 增加页面缓存
redirect移除页面缓存(onUnload)
navigateBack也会移除页面传参(onUnload)
小程序默认是缓存5层

小程序使用Vant

初始化项目

npm init -y

安装

npm i @vant/weapp -S --production

工具->构建npm（app.json）

//定
"usingComponents": {
    "van-button": "@vant/weapp/button/index",//按钮
    "step":"/components/step/step"//组件
  }

//用
<van-button type="default">默认按钮</van-button>
<view><step></step></view>

生命周期

小程序生命周期：

 onShow() {
    console.log('前台显示-onShow');
  },
  onHide() {
    console.log('后台运行-onHide');
  },
  onError() {
    console.log('xxx-onError');
  },
  onLaunch() {
    console.log('启动-onLaunch');
  }

//分包  
"subpackages": [
    {
      "root": "user",
      "pages": [
        "pages/orderlist/orderlist",
        "pages/setting/setting"
      ]
    }
  ],
//分包预加载
  "preloadRule": {
    "pages/user/user":{
      "network": "all",
      "packages": ["user"]
    }
  },

开放能力

获取头像

<image src="{{userInfo.avatarUrl}}" style="width: 60px;height: 60px;"/> 
<button bindtap="getuser" type="primary">个人信息</button>

 getuser() {
    var that = this
    wx.getUserProfile({
      desc: 'desc',
      success(res) {
        console.log(res.userInfo);
        that.setData({ userInfo: res.userInfo })
        wx.setStorageSync('userInfo', res.userInfo)
      }
    })
  },