微信小程序框架与组件

淩亂°似流年 2021-09-15 16:50 389阅读 0赞

![标题图][1240]

## 前言： ##

学习微信小程序应该不怎么难吧~下面我来记录一下学习笔记，在学微信小程序的时候，如果你有`html+css+javascript`的基础，那么你就很快地上手掌握的。下面提供微信小程序官方地址：[https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html][https_developers.weixin.qq.com_miniprogram_dev_framework_structure.html]

下面一起学一学，微信小程序的框架吧~看文档，别学别理解。在下的讲述如果不正确的话，可以参考官方文档，也可以帮忙改正。具体还得看官方文档。

## 正文： ##

微信小程序的文件结构，有一个描述整体的app和描述多个页面的文件组合在一起的。给大家看一下打开微信小程序一般由什么：

![示意图][1240 1]

一个文件项目中主体有

app.js 为小程序的逻辑代码
    app.json 为小程序的公共设置
    app.wxss 为小程序的样式

一个文件中如`logs`,`index`等，一般都有

xxx.js 页面逻辑代码如JavaScript
    xxx.wxml 如html
    xxx.wxss 如css样式
    json 为该页面的配置

在app.json中的代码，我提供的代码是刚创建时的代码模块：

{
      //这部分为页面的路径
      "pages":[
        "pages/index/index",
        "pages/logs/logs"
      ],
      //窗口表现
      "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle":"black"
      }
    }

在文档中还提供了`tabBar`，`networkTimeout`等。  
`tabBar`

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

`networkTimeout`网络超时

"networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
      },

`window`的属性：

（navigationBar-BackgroundColor）
    navigationBarBackgroundColor为导航栏的背景颜色
    （navigationBar-TextStyle）
    navigationBarTextStyle为导航栏标题颜色
    仅支持 black/white
    （navigationBar-TitleText）
    navigationBarTitleText为导航栏标题文字内容
    navigationStyle为导航栏样式
    仅支持 default/custom
    backgroundColor窗口的背景色
    backgroundTextStyle下拉 loading 的样式，仅支持 dark/light

`tabBar`可以切换页面（最少2，最多5）

color文字颜色
    selectedColor文字选中时的颜色
    backgroundColor背景色
    borderStyle 仅支持 black/white

iconPath
    selectedIconPath

`networkTimeout`设置各种网络请求

wx.request
    wx.connectSocket

`xxx.json：`

navigationBarBackgroundColor
    navigationBarTextStyle
    navigationBarTitleText
    backgroundColor
    backgroundTextStyle
    等

`App()`  
用来注册小程序。生命周期函数

onLaunch
    onShow
    onHide
    onError

`object`参数说明：

data:初始数据
    生命周期函数
    onLoad
    onReady
    onShow
    onHide
    onUnload

组是视图的基本组成单元。  
知识点：  
数据绑定

Page({
      data: {
        ...
      }
    })

列表渲染：

条件渲染  
模板

![示意图][1240 2]

![示意图][1240 3]

![示意图][1240 4]

数据绑定

> \{ \{ message \}\}
> 
> “\{ \{flag ? true : false\}\}”

![示意图][1240 5]

![示意图][1240 6]

![示意图][1240 7]

> wx:for

<view wx:for="{ { array}}" wx:for-index="idx" wx:for-item="itemName"> { { idx}}: { { itemName.message}} </view> //wx:for="{ {[1, 2, 3]}}" <view> { { index}}: </view> <view> { { item}} </view>

提供两种文件引用方式`import`和`include`。

标识符

delete 
    void 
    typeof
    
    null 
    undefined 
    NaN 
    Infinity 
    var
    
    if 
    else 
    
    true 
    false
    
    require
    
    this 
    function 
    arguments
    return
    
    for
    while
    do
    break
    continue
    switch
    case
    default

数据类型

1. number ： 数值
    toString
    toLocaleString
    valueOf
    toFixed
    2. string ：字符串
    3. boolean：布尔值
    toString
    valueOf
    4. object：对象
    5. function：函数
    6. array : 数组
    7. ate：日期
    8. regexp：正则

选择器

view::after 在 view 组件后边插入内容
    view::before    在 view 组件前边插入内容

组件

`view`视图容器  
`scroll-view`滚动视图  
`swiper`滑块视图容器  
`movable-area`可移动区域  
`movable-view`可移动的视图容器  
`cover-view`覆盖在原生组件之上的文本视图  
`cover-image`覆盖在原生组件之上的图片视图  
`rich-text`富文本  
`label`用来改进表单组件的可用性  
`picker`从底部弹起的滚动选择器  
`picker-view`嵌入页面的滚动选择器  
`navigator`页面链接  
`functional-page-navigator`用于跳转到插件功能页  
`live-player`实时音视频播放  
`live-pusher`实时音视频录制

如果觉得不错，那就点个赞吧！❤️  
我的目标是——每天不断更

[1240]: /images/20210724/529c83e02c0e45c0a5f45e1bd35261dc.png
[https_developers.weixin.qq.com_miniprogram_dev_framework_structure.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html
[1240 1]: /images/20210724/824d3bf6b094407fb17f54c67202b3f3.png
[1240 2]: /images/20210724/6d8dad80fad642ca96b61698b78f4147.png
[1240 3]: /images/20210724/75733a72467a4b098c52b9429363b387.png
[1240 4]: /images/20210724/658acc873ae74b7aa4ae97491acf1bd4.png
[1240 5]: /images/20210724/72f9f48da8cd4f2da7a1a2d9640d3c6c.png
[1240 6]: /images/20210724/a1791274388249caa411821ad4b79a22.png
[1240 7]: /images/20210724/5995dda8e69442448f84cc6f5ed7defe.png