微信小程序基础

微信小程序基础

窗口配置

路由/路径

 "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],

导航栏标题文字内容

 "navigationBarTitleText": "Demo"

导航栏背景颜色

 "navigationBarBackgroundColor": "#ffffff",

导航栏标题颜色

"navigationBarTextStyle": "black",  //仅支持black，white

窗口的背景色

"backgroundColor": "#eeeeee", 		//窗口背景颜色

底部导航

  "tabBar": {
    "list": [{  //tabber数组，最少为2个
        
      "pagePath": "pages/index/index",  //路径
      "text": "首页",				//标题
      "iconPath":"路径",			//icon
      "selectedIconPath":"路径"	//选中时的icon
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },

小程序文件类型

1、index.wxml html页面

2、 index.wxss css样式

3、index.js js逻辑代码

4、 index.json 配置文件

小程序生命周期

小程序

onLaunch（）   页面启动时调用
onHide（） 页面隐藏
onShow（） 页面显示

page

注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

参数

data：页面初始数据

onLoad ：生命周期回调—监听页面加载

onReady：生命周期回调—监听页面初次渲染完成

onShow：生命周期函数—监听页面显示

onHide：生命周期函数—监听页面隐藏

onPullDownRefresh：监听用户下拉动作

onReachButton：监听上拉触底事件

onShareAppMessage：监听右上角分享按钮

onResize：页面尺寸改变时触发

onTabItemTap：当前是tab页面时,点击tab触发

数据请求和封装

1、首先先创建base.js 用于设置baseURl

const baseURL ='https://api.it120.cc/konghailong/'

export default baseURL

2、创建一个http.js 用于封装请求方式（get、post……）

//get请求
function get(option){
    //数据未请求到，loading样式
  wx.showLoading({title:'加载中',mask:true});
   //实例化一个promise对象
  return new Promise((resolve,reject)=>{
      //微信请求
    wx.request({
      url: option.url, 
      data: option.params,
      timeout:5000,
      method:'GET',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
       resolve(res.data)
       wx.hideLoading()
      },
      fail(err){
        reject(err)
        wx.hideLoading()
      }
    })
  })
}
//post
function post(option){
  wx.showLoading({title:'加载中',mask:true});
  return new Promise((resolve,reject)=>{
    wx.request({
      url: option.url, 
      data: option.params,
      timeout:5000,
      method:'POST',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
       resolve(res.data)
       wx.hideLoading()
      },
      fail(err){
        reject(err)
        wx.hideLoading()
      }
    })
  })
}
export default {get,post}

3、创建ports.js 用统一管理路径

//导入http和base文件
import http from './http'
import base from './base'
const api={
//get请求
    getBanner:()=>{      
     return http.get({url:base+'路径'})
    },
   }
//post请求
	getList:(params)=>{
      return http.post({url:base+'路径',params:params})
    },

4、在app.js中引入ports文件，配置全局

import ports from './network/ports'

App({
  globalData: {
    userInfo: null,
  },
  ports,
})

5、对应文件应用

 onReady:async function () {
    var that=this
    //利用async、await拿取数据/也可以用 promise的.then链提取
    var banner=await getApp().ports.getBanner()
    that.setData({
      banner:banner.data
    })

路由跳转及传参

wx.switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，但不能传参

我们可以利用setStorag存本地或者app.js中的 globalData进行存储

wx.switchTab({
  url: '/index'
})

wx.reLaunch

关闭所有页面，打开到应用内的某个页面，可以传参

需要跳转的应用内页面路径 (代码包路径)，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔

wx.reLaunch({
  url: 'test?id=1'
})


// test
Page({
  onLoad (option) {
    console.log(option.query)
  }
})

wx.redirectTo

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面，可以传参，同上

wx.redirectTo({
  url: 'test?id=1'
})

wx.navigateTo

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面，可以传参，同上

wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

wx.navigateBack

关闭当前页面，返回上一页面或多级页面

// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})

// 此处是B页面
wx.navigateTo({
  url: 'C?id=1'
})

// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
  delta: 2
})

路由配置

在app.json中的pages写下路由地址，会自动生成相应的文件夹和文件

{
 "pages":[
    "pages/index/index",
    ]
}

点击获取参数

在某个元素上绑定一个点击事件，并通过data-item（item可自定义）穿入参数

<view bindtap="onClick" data-item('123')>
    Click here!
</view>

在js文件中获取点击事件的参数，

 gotoDetail(e){
    var num=e.currentTarget.dataset.item
    console.log(num);
 }

本地存储的几种方式

wx.setStorage

将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB

wx.setStorage 的同步版本

wx.removeStorage

从本地缓存中移除指定 key

wx.removeStorageSync

wx.removeStorage 的同步版本

wx.getStorage

从本地缓存中异步获取指定 key 的内容

wx.getStorageSync

wx.getStorage 的同步版本

wx.getStorageInfo()

异步获取当前storage的相关信息

wx.getStorageInfoSync()

wx.getStorageInfo 的同步版本

wx.clearStorage

清理本地数据缓存

wx.clearStorageSync()

wx.clearStorage 的同步版本