疯狂java


您现在的位置: 疯狂软件 >> 新闻资讯 >> 正文

微信小程序框架与组件


 

 

前言:

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

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

正文:

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

示意图

一个文件项目中主体有

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

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

xxx.js 页面逻辑代码如JavaScript xxx.wxmlhtml xxx.wxsscss样式 json 为该页面的配置

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

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

在文档中还提供了tabBarnetworkTimeout等。
tabBar

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

networkTimeout网络超时

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

window的属性:

(navigationBar-BackgroundColornavigationBarBackgroundColor为导航栏的背景颜色 (navigationBar-TextStylenavigationBarTextStyle为导航栏标题颜色 仅支持 black/white (navigationBar-TitleTextnavigationBarTitleText为导航栏标题文字内容 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: {     ...   } })

列表渲染:

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

条件渲染
模板

示意图

示意图

示意图

数据绑定

{{ message }}

"{{flag ? true : false}}"

示意图

示意图

示意图

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>

提供两种文件引用方式importinclude

标识符

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

如果觉得不错,那就点个赞吧!❤️