小程序知识总结

  • 时间:
  • 来源:互联网
  • 文章标签:

小程序知识总结(一)

1.窗口配置

在小程序中有个配置全局的文件app.json,里面有很多配置项,现在说一下窗口的配置项:window。

属性类型默认值描述
navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如 #000000
navigationBarTextStylestringwhite导航栏标题颜色,仅支持 black / white
navigationBarTitleTextstring导航栏标题文字内容
navigationStylestringdefault导航栏样式,仅支持以下值:default 默认样式custom 自定义导航栏,只保留右上角胶囊按钮。
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStylestringdark下拉 loading 的样式,仅支持 dark / light
backgroundColorTopstring#ffffff顶部窗口的背景色,仅 iOS 支持
backgroundColorBottomstring#ffffff底部窗口的背景色,仅 iOS 支持
enablePullDownRefreshbooleanfalse是否开启全局的下拉刷新。
onReachBottomDistancenumber50页面上拉触底事件触发时距页面底部距离,单位为 px。
pageOrientationstringportrait屏幕旋转设置,支持 auto / portrait / landscape

HexColor类型的需要使用十六进制颜色值;
代码示例:

"window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }

这里引用的官方文档,详情请到https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
查看。

2.小程序文件类型

小程序的文件类型常用的有:
一般都是配置好路由之后自动生成的,有四种类型,
后缀是wxml的文件和普通的html文件差不多就是里面的标签换了一个名字,
后缀是wxss的文件和css文件一样,css怎么写wxss就怎么写,只是后缀名换了一下,
还有就是json文件和js文件了,如图:
小程序文件图片介绍

3.小程序生命周期和小程序页面生命周期

小程序的生命周期主要有应用生命周期,页面生命周期和组件生命周期,今天主要说应用生命周期和页面生命周期。

应用生命周期:

生命周期名作用
onLaunch监听小程序初始化。小程序初始化完成时(全局只触发一次)
onShow监听小程序显示。小程序启动,或从后台进入前台显示时
onHide监听小程序隐藏。小程序从前台进入后台时。
onError错误监听函数。小程序发生脚本错误,或者 api 调用失败时触发,会带上错误信息
onPageNotFound页面不存在监听函数。小程序要打开的页面不存在时触发,会带上页面信息回调该函数

页面生命周期:

生命周期名作用
onLoad生命周期回调—监听页面加载
onReady生命周期回调—监听页面初次渲染完成
onShow生命周期回调—监听页面显示
onHide生命周期回调—监听页面隐藏
onUnload生命周期回调—监听页面卸载
onPullDownRefresh监听用户下拉动作
onReachBottom页面上拉触底事件的处理函数
onShareAppMessage用户点击右上角转发
onPageScroll页面滚动触发事件的处理函数
onResize页面尺寸改变时触发
onTabItemTap当前是 tab 页时,点击 tab 时触发

内容来源于lilicat的博客。

4.数据请求和封装

数据的封装和请求看下面代码:
在utils文件夹里创建http.js文件和api.js文件,在http.js文件中写入下面代码:

const http = '公共请求地址';
// post请求
function postRequest(url,data){
  return new Promise((resolve,reject)=>{
    let that = this;
    let postData = data;
    wx.request({
      url:http + url,
      data:postData,
      method:'POST',
      header:{
        'content-type':'application/x-www-form-urlencoded'
      },
      success:(res)=>{
        resolve(res)
      },
      fail:(err)=>{
        reject('请求错误')
      }
    })
  })
}

// get请求
function getRequest(url,data){
  return new Promise((resolve,reject)=>{
    let that = this;
    let postData = data;
    wx.request({
      url:http + url,
      data:postData,
      method:'GET',
      header:{
        'content-type':'application/json'
      },
      success:(res)=>{
        resolve(res)
      },
      fail:(err)=>{
        reject('请求错误')
      }
    })
  })
}

module.exports = {
  getRequest,
  postRequest
}

在api.js文件中写入:

const https = require('./http');

// 详情
let detail = (data)=>{//get请求
  return https.getRequest('shop/goods/detail?id=' + data)
}
let details = (data)=>{//post请求
  return https.getRequest('shop/goods/detail', data)
}

module.exports = {
  detail,
  details ,
}

在用到封装的js文件中:

let api = require('api.js路径');
api.detail(data)

5.路由跳转分类和路由跳转传递参数

路由跳转大致分为两类:可以跳转tabbar和不可以跳转tabbar;

可以跳转tabbar的有:

wx.switchTab:跳转到tabbar页面并关闭所有非tabbar页面,不能传参;
wx.reLaunch:跳转到应用的某个页面,并关闭所有页面,可以通过拼接地址传递参数;

不可以跳转tabbar的有:

wx.redirectTo:关闭所有页面,并跳转到应用内的某个非tabbar页面,可以通过拼接地址传递参数;
wx.navigateTo:保留当前页面,跳转到应用内的某个非tabbar页面,可以通过拼接地址传递参数;
wx.navigateBack:关闭当前页面,返回上级或多级页面

6.路由配置

用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。文件名不需要写文件后缀,框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。
未指定 entryPagePath 时,数组的第一项代表小程序的初始页面(首页)。
小程序中新增/减少页面,都需要对 pages 数组进行修改。
例:配置index、logs文件夹以及里面的四个文件

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

7.点击获取参数

在wxml中的元素上可以用 data-(属性名) 来声明一个自定义属性,在js文件中通过点击事件来获取声明的这个属性,例如:
申明属性

//这个是属性名接收变量
<view wx:for="{{classlist}}" wx:key="index" bindtap="getitem" data-id="{{item.id}}">

//这个是属性名接收字符串
<view wx:for="{{classlist}}" wx:key="index" bindtap="getitem" data-id="字符串">

获取自定义属性的值

getitem(e) {//函数中的固有值,用于获取元素的所有属性
	//打印出e之后找到currentTarget属性或者Target属性下面的dataset属性,就可以看到要获取的值了
    console.log(e.currentTarget.dataset.id)
  },

8.本地存储和获取的几种方式

1.本地存储

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

2.获取本地存储

wx.getStorage:从本地缓存中异步获取指定 key 的内容。
wx.getStorageSync:wx.getStorage的同步版本。

3.删除本地存储

wx.removeStorage:从本地缓存中移除指定 key。
wx.removeStorageSync:wx.removeStorage的同步版本。

4.清除本地存储

wx.clearStorage:清理本地数据缓存。
wx.clearStorageSync:wx.clearStorage的同步版本。

本文链接http://www.taodudu.cc/news/show-1782133.html