微信小程序框架与组件

版权声明：未经博主允许不得转载

标题图

查看官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/

前言：

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

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

正文：

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

示意图

一个文件项目中主体有

代码语言：javascript复制

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

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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

networkTimeout网络超时

代码语言：javascript复制

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

window的属性：

代码语言：javascript复制

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

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

代码语言：javascript复制

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

代码语言：javascript复制

iconPath
selectedIconPath

networkTimeout设置各种网络请求

代码语言：javascript复制

wx.request
wx.connectSocket

xxx.json：

代码语言：javascript复制

navigationBarBackgroundColor
navigationBarTextStyle
navigationBarTitleText
backgroundColor
backgroundTextStyle
等

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

代码语言：javascript复制

onLaunch
onShow
onHide
onError

object参数说明：

代码语言：javascript复制

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

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

代码语言：javascript复制

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

列表渲染：

代码语言：javascript复制

<view wx:for="{{array}}"> {{item}} </view>

条件渲染模板

示意图

示意图

示意图

数据绑定

{{ message }}
"{{flag ? true : false}}"

示意图

示意图

示意图

wx:for

代码语言：javascript复制

<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。

标识符

代码语言：javascript复制

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

数据类型

代码语言：javascript复制

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

选择器

代码语言：javascript复制

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实时音视频录制

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

小程序官方文档容器 https 实时音视频

0 人点赞