为了账号安全,请及时绑定邮箱和手机立即绑定

微信小程序从入门到精通-基础篇(2)

2020.05.07 15:57 4454浏览

前言

上一篇我们简单罗列了一下小程序每个目录和文件的作用,今天我们来详细介绍一下每个文件的作用以及包含的内容。

正文

从模块划分来看,小程序主要分为全局配置、页面、基础组件、自定义组件四部分。

全局配置

1、app.json

小程序根目录下的 app.json文件用来对微信小程序进行全局配置。比如我们通过pages属性指定小程序由哪些页面组成。小程序运行时默认会加载数组中配置的第一个页面

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

也可以通过tabBar配置我们的底部导航

{
    "tabBar": {
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页"
            },
            {
                "pagePath": "pages/logs/logs",
                "text": "日志"
            }
        ]
    }
}

2、app.js

每个小程序都需要在app.js中调用App方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。

举个?

App({
    onLaunch (options) {
        // Do something initial when launch.
    },
    onShow (options) {
        // Do something when show.
    },
    onHide () {
        // Do something when hide.
    },
    onError (msg) {
        console.log(msg)
    },
    globalData: 'I am global data'
})

整个小程序只有一个 App实例,是全部页面共享的。我们可以通过getApp方法获取到全局唯一的 App 实例,获取App上的数据或调用开发者注册在 App 上的函数。

// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data

3、app.wxss

WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。与 CSS 相比,WXSS 扩展的特性有尺寸单位(rpx)、样式导入。
其中app.wxss是作用域全局的样式。我们可以在app.wxss里面编写通用样式。比如我们统一设置box-sizing属性

*{
    box-sizing:border-box;
}

页面

js

对于小程序中的每个页面,都需要在页面对应的js文件中进行注册,指定页面的初始数据、生命周期回调、事件处理函数等。

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

json

全局通用的配置我们可以在app.json中进行配置,如果想针对某一个页面单独配置一些属性,比如标题,我们可以通过该json进行覆盖app.json中的配置。

{
  "navigationBarTitleText": "我是页面标题"
}

wxml

WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。模版还支持 数据绑定、列表渲染、条件渲染、模版 等功能。

<!--数据绑定-->
<view> {{message}} </view>
<!--列表渲染-->
<view wx:for="{{array}}"> {{item}} </view>
<!--条件渲染-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
<!--模板-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

wxss

只作用于当前页面的样式

基础组件

微信小程序自带的基础组件有很多,比较常用的有text、view、scroll-view、image等等,大家可以通过文档查看https://developers.weixin.qq.com/miniprogram/dev/component/view.html

<view class="container">
    <text>文本</text>
</view>

自定义组件

我们可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。在实际开发中用的最频繁,因为在实际的公司项目中一个页面会由非常多的模块组成,如果把所有的模块都放在一个页面来实现,会导致代码非常臃肿,而且难以维护。这个时候我们可以借助自定义组件功能把每个模块进行抽离,减少代码耦合,降低后期维护成本。

举个?,我们来定义一个自定义标题组件。
components/head/head.wxml

<view>{{title}}</view>

components/head/head.json

{
  "component": true
}

components/head/head.js

Component({
  properties: {
    // 这里定义了innerText属性,属性值可以在组件使用时指定
    title: {
      type: String,
      value: '标题',
    }
  }
})

调用方法

pages/index/index.json

{
  "usingComponents": {
    "head": "components/head"
  }
}

pages/index/index.wxml

<head title="我是标题"></head>
点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消