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

2020/5/7 20:26:22

编程Tag： javascript 小程序 Html/CSS

本文主要是介绍微信小程序从入门到精通-基础篇（2），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前言

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

正文

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

全局配置

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": "日志"
            }
        ]
    }
}

更多其他配置可以查看官方文档https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

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>

这篇关于微信小程序从入门到精通-基础篇（2）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！