微信小程序入门篇

一个完整的微信小程序是由一个App实例和多个Page实例构成,其中App实例表示该小程序应用,多个Page表示该小程序的多个页面。

微信小程序的基础知识主要有以下几个部分:

  • 两种配置文件 && 两个核心函数
  • app.json 应用的全局配置文件
    它是针对微信小程序的全局配置,主要包含以下几个配置:
    ✦pages:页面路径的数组,表示小程序要加载的所有页面,其中数组第一项代表小程序的初始页面。
    ✦window:微信原生功能,定制化不强。可设置小程序的状态栏、导航条、标题以及窗口背景色。
    ✦tabBar:微信原生功能,定制化不强。适用于常规的Tab应用,Tab栏可置于顶部或底部;tabBar是一个数组,仅支持2-5个tab。
    ✦networkTimeout:配置小程序网络请求的超时时间。
    ✦debug:调试模式开关,开发模式下建议开启,正式发布别忘了关闭。

  • page.json 页面的全局配置文件
    page.json只能对window配置,有两个比较有用的配置项分别是:
    ✦enablePullDownRefresh:是否开启下拉刷新
    ✦disableScroll:只能在page.json配置,禁止页面上下滚动,猜测可以实现完美滑屏滑动(未验证)

  • App() 小程序注册入口,全局唯一

     // 注册微信小程序,全局只有一个
     let appConfig = {
       // 小程序生命周期的各个阶段
       onLaunch: function(){},
       onShow: function(){},
       onHide: function(){},
       onError: function(){},
       // 自定义函数或者属性
       ...
     };
     App(appConfig);
    
     // 在别的地方可以获取这个全局唯一的小程序实例
     const app = getApp();
  • Page() 页面注册入口

    // 注册微信小程序,全局只有一个
    let pageConfig = {
       data: {},
       // 页面生命周期的各个阶段
       onLoad: function(){},
       onShow: function(){},
       onReady: function(){},
       onHide: function(){},
       onUnload: function(){},
       onPullDownRefresh: function(){},
       onReachBottom: function(){},
       onShareAppMessage: function(){},
       // 自定义函数或者属性
       ...
    };
    Page(pageConfig);
    
    // 获取页面堆栈,表示历史访问过的页面,最后一个元素为当前页面
    const page = getCurrentPages();
  • WXML模板语法,页面渲染
    小程序虽然是hybrid模式,但并不使用HTML渲染,而是全部通过自定义标签来渲染页面。
    和所有的模板语言一样,WXML支持数据绑定、条件渲染、循环、模块化等功能。

    • 数据绑定
      在 WXML 中可以使用{{}}将 Page 的变量或者表达式包裹起来,实现数据绑定。
    • 条件渲染
      条件渲染,适合根据数据输出不同状态的 WXML
    • 循环渲染
      循环渲染,适合遍历数据输出多段 WXML
    • 模块化
      WXML的模块化,可以让我们复用一些wxml片段
  • 页面间的跳转
    小程序以栈的形式维护了历史访问的所有页面,并提供了多种页面间的跳转方式;结合前文提到的App()和Page()的各个生命周期,不同的跳转方式和不同的生命周期关联,如下图:
    这里写图片描述

  • 交互事件
    事件绑定

    // bindtap 和 catchtap的区别在于 
    // bindtap 不会阻止事件冒泡 
    // catchtap会冒泡事件冒泡 
    <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view> 
    <view id="tapTest" data-hi="WeChat" catchtap="tapName"> Click me! </view> 
    // 绑定的函数tapName只是一个函数名称,默认接受一个event对象作为参数 
    Page({ 
    tapName: function(event) { 
     console.log(event) 
    } 
    })

    事件传参
    传递自定义参数主要有两种方式:
    第一种:将参数绑定到wxml标签上,然后通过event.target.dataset获取
    第二种:直接使用Page.data或其他数据

  • 官方组件和官方API
    官方组件:https://developers.weixin.qq.com/miniprogram/dev/component/?t=20161222
    官方API:https://developers.weixin.qq.com/miniprogram/dev/api/?t=20161222

参考链接:https://www.zhihu.com/question/50907897/answer/140010208

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页