专栏首页达达前端微信小程序框架与组件

微信小程序框架与组件

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

标题图

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

前言:

学习微信小程序应该不怎么难吧~下面我来记录一下学习笔记,在学微信小程序的时候,如果你有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.wxml 如html
xxx.wxss 如css样式
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-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: {
    ...
  }
})

列表渲染:

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 全栈开发工程师微信小程序-上(中)

    750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位.

    达达前端
  • 微信小程序新闻信息列表展示

    达达前端
  • 小程序九宫格

    达达前端
  • Android6.0源码分析之View(一)

    目前对于view还处于学习阶段,本来打算学习结束之后再写一篇进行总结,但是发现自己自制力太差,学习效率太低,所以在此,边学边写博客,不仅督促自己完成对view的...

    fanfan
  • 微信小程序--自定义新用户引导页面

    海轰Pro
  • 协力抗疫,码力 全开”线上黑客马拉松+9+疫同程+疫同

    疫同,一款寻找新型冠状病毒感染的肺炎确诊患者同行程的系统。集成确诊同程线索发布、信息审核、同乘查询以及自主上报功能,从发布到上报形成一套闭环,做到疫情的防控的作...

    TANG STUDIO PRO
  • uniapp样式绑定方式

    薛定喵君
  • android view转Bitmap生成截图的方法

    项目中经常会用到分享的功能,有分享链接也有分享图片,其中分享图片有的需要移动端对屏幕内容进行截取分享,说白了就是将view 转成bitmap 再到图片分享,还有...

    砸漏
  • 小程序组件开发 -- 疫情动态

    之前有很多疫情相关的项目涌现,本弱鸡的作品至今只有一点点star,本着骗star的原则,把一个比较常用的功能组件进行封装,方便各位小程序开发者使用,组件代码放在...

    Kindear
  • Android 开发艺术探索笔记一

    ViewRoot对应于ViewRootImpl类,它是连接windowmanager和DecorView的纽带,View的三大流程均是通过ViewRoot来完成...

    Yif

扫码关注云+社区

领取腾讯云代金券