对微信小程序的理解

时间：2025-03-06 09:18:11

前言

相信很多人对微信小程序都比较情有独钟，首先大家应该知道小程序的优点，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。

历史

从2016/9/21微信小程序发展以来发生了千变万化的变化，在此过程中增加了

  1. 支付宝小程序（2017-09-20）
  2. 头条小程序（2018-09-16）
  3. 百度小程序（2018-07）
  4. QQ小程序（2019-06）
    但生活中用的最多的还属微信小程序，微信小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。

配置小程序

  1. 全局配置中配置相当于vue中的路由
    直接在pages选项中写页面路径，即可创建相应的页面
{
  "pages": [
    "pages/kind/kind",
    "pages/home/home",
    "pages/cart/cart",
    "pages/user/user",
    "pages/details/details",
    "pages/map/map"
  ],
  "window": {
    "navigationBarBackgroundColor": "#f66",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "乐购",
    "backgroundColor": "#efefef",
    "backgroundTextStyle": "dark",
    "backgroundColorTop": "#0f0",
    "onReachBottomDistance": 50
  },
  "tabBar": {
    "color": "#333",
    "selectedColor": "#f66",
    "backgroundColor": "#efefef",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "resources/",
        "selectedIconPath": "resources/home_active.png"
      },
      {
        "pagePath": "pages/kind/kind",
        "text": "分类",
        "iconPath": "resources/",
        "selectedIconPath": "resources/kind_active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "resources/",
        "selectedIconPath": "resources/cart_active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "resources/",
        "selectedIconPath": "resources/user_active.png"
      }
    ]
  },
  "networkTimeout": {
    "request": 6000,
    "connectSocket": 6000,
    "uploadFile": 6000,
    "downloadFile": 6000
  },
  "permission": {
    "": {
      "desc": "允许定位你的地理位置"
    }
  },
  "navigateToMiniProgramAppIdList": [
    "wx5dfe0dd623d5ae6b"
  ],
  "style": "v2",
  "sitemapLocation": "",
  "debug": false
}

在这里的为文件，主要用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 ，则默认为所有页面都允许被索引。

  1. 页面配置pages文件中子文件配置各个页面
    配置局部样式
{
  "navigationBarBackgroundColor": "#ff7001",
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "乐购-首页",
  "backgroundColorTop": "#efefef",
  "backgroundTextStyle": "light",
  "enablePullDownRefresh": true,
  "onReachBottomDistance": 50,
  "disableScroll": false,
  "usingComponents": {
    "prolist": "/components/prolist/prolist"//子组件引入路径
  }
}

这里的js文件主要用于处理页面的初始数据、生命周期回调、事件处理函数等。

Page({

  /**
   * 页面的初始数据
   * data 是页面第一次渲染使用的初始数据。
   * 页面加载时，data 将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。
   * 渲染层可以通过 WXML 对数据进行绑定。
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   * 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
   */
  onLoad: function (options) {
    // options为打开当前页面路径中的参数
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   * 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   *  页面显示/切入前台时触发
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   * 页面隐藏/切入后台时触发
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   * 页面卸载时触发。
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   * 需要在的window选项中或页面配置中开启enablePullDownRefresh。
   * 可以通过触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
   * 当处理完数据刷新后，可以停止当前页面的下拉刷新
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   * 可以在的window选项中或页面配置中设置触发距离onReachBottomDistance。
   * 在触发距离内滑动期间，本事件只会被触发一次
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (res) {
    if ( === 'button') {
      // 来自页面内转发按钮
      console.log()
    }
    // 自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123',
      imageUrl: ''
    }
  },

  /**
   * 监听用户滑动页面事件
   */
  onPageScroll: function () {

  }
  /**
   * 自定义函数
   */
})

如果在全局文件中设置一些全局数据，如：获取设备的基本信息

//
App({
  onLaunch: function () {
    //获取设备的基本信息
    this.getDeviceInfoFn()
  },
  getDeviceInfoFn() {
    ({
      success: (res) => {
        console.log(res)
        // 修改全局变量数据
         = res
      }
    })
  },
  globalData: {
    userInfo: null,
    deviceinfo:null//设置一个全局设备信息变量接受
  },

在局部js文件中需 const app = getApp(); (app)
//解构赋值
const {globalData:{deviceinfo:{screenWidth,screenHeight}}} = app
来获取全局js中的数据

发送异步请求

建议使用es6的模块化方法，api中提供的是基于commonjs规范的exports以及require语法
定义工具模块 utils/

// 接口地址 
const baseUrl = '接口地址'
//暴露全局方法
export function request(options){
  //解构赋值
  const {url,data}=options;
  ({
    title: '加载中',
  })
  // 回调函数、promise、generator + yield、async+await
  return new Promise((resolve, reject) => {
    ({
      url: baseUrl + url,
      data: data || {},
      success: (res) => {
        // 异步操作成功调用resolve
        resolve(res)
      },
      fail: (err) => {
        // 异步操作失败调用reject
        reject(err)
      },
      complete: () => {
        // 成功失败都取消刷新
        wx.hideLoading()
      }
    })
  })
}

小程序中的常用组件

  1. 首页轮播图数据的请求以及渲染
<swiper
  indicator-dots="{{true}}" autoplay="{{true}}" circular="{{true}}" 
  duration="{{500}}">
  <block wx:for="{{bannerlist}}" wx:key="index">
    <swiper-item >
      <image src="{{'http://.....' + item}}"></image>
    </swiper-item>
  </block>
</swiper>
<prolist></prolist>//子组件调用

indicator-dots:是否显示面板指示点 autoplay:是否自动切换 circular:是否采用衔接滑动
duration:滑动动画时长这些都是常用的方法，具体其它方法可以参考文档

  1. map
<map 
  class="map" 
  longitude="{{longitude}}" 
  latitude="{{latitude}}"
  scale="15"
  markers="{{markers}}"
  controls="{{controls}}"
  bindcontroltap="controlshandler"//自定义点击事件
  ></map>
  //获取经纬度
  data: {
    longitude: '118.8205719000', // 经度
    latitude: "31.8839713500", // 维度
    markers: [{
      id: 1, //marker 点击事件回调会返回此 id
      longitude: '118.8205719000', // 经度
      latitude: "31.8839713500", // 维度
      title: '宝塔镇河妖', // 点击marker提示信息callout出现时忽略
      iconPath: '/resources/', 
      width: 40,
      height: 40,
      callout: {
        content: '宝塔镇河妖',
        color: '#f66',
        fontSize: 14,
        borderRadius: 5,
        borderWidth: 3,
        bgColor: 'white',
        padding: 10,
        display: 'BYCLICK', //  'BYCLICK': 点击显示; 'ALWAYS': 常显
        textAlign: 'center'
      }
    }],
    controls: [{//controls为地图上显示控件，控件不随着地图移动
      id: 1,
      position: { // left,top
        left: screenWidth-70,  // 获取设备的宽度以及高度 ---  获取设备的基本信息
        top: screenHeight - 150,
        width: 40,
        height: 40
      },
      iconPath: '/resources/',
      clickable: true // 控制默认不可以点击
    }]
  },
  //自定义点击事件
  controlshandler(event) {
    console.log(event)
    //判断是否点击的定位按钮的id号
    if (event.controlId === 1) {
      //调用获取当前经纬度
      wx.getLocation({
        success: (res) => {
          console.log(res)
          //解构赋值
          const {longitude,latitude} = res
          this.setData({
            longitude, latitude,
            markers: [{
              id: 1, //marker 点击事件回调会返回此 id
              longitude: longitude, // 经度
              latitude: latitude, // 维度
              title: '宝塔镇河妖', // 点击marker提示信息callout出现时忽略
              iconPath: '/resources/', 
              width: 40,
              height: 40,
              callout: {
                content: '宝塔镇河妖',
                color: '#f66',
                fontSize: 14,
                borderRadius: 5,
                borderWidth: 3,
                bgColor: 'white',
                padding: 10,
                display: 'BYCLICK', //  'BYCLICK': 点击显示; 'ALWAYS': 常显
                textAlign: 'center'
              }
            }]
          })
        }
      })
    }
  },

map方法比较多，具体详情可以参考相关文档
小程序的定位相关api

小程序中的组件通信

逆战中为了美化wxml页面布局减少父组件的js代码量，一般都是传递给子组件

//在js文件中获取数据
 data: {
    bannerlist:[],//异步请求获取的数据
    reachbottom:false
  },
//在wxml中调用组件中传值
<prolist prolist="{{prolist}}"/>
//在子组件中接受
properties: {
    prolist: Array//接受的数据类型
  },

以上只是接触小程序以后的一部分理解，还有好多好多，随着小程序的越来越成熟也诞生了别的框架可以处理页面需求如：Taro、uni-app等
生活是一张洁白的画纸，我们每个人都是手握各色画笔的画师，生活是一杯香醇的美酒，我们每个人都是一名出色的品酒师，生活是一块神奇的土地，我们每个人都是辛勤耕耘的劳动者，生活更是一条看不见尽头的长路，我们每个人都是生活的远足者。

相关文章