#微信小程序# 基础组件

志扬工作室

共 2823字,需浏览 6分钟

 ·

2022-04-24 09:49

-Start:关注本公众号后,可直接联系后台获取排版美化的详细文档!

-Hints:本篇文章所编纂的资料均来自网络,特此感谢参与奉献的有关人员。


微信小程序-开发步骤

-开发账号申请

https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN

-账号APPID获取

微信管理平台:设置》账号信息》AppID

https://mp.weixin.qq.com/wxamp/basicprofile/index?token=784407765&lang=zh_CN

-开发工具部署

下载地址:

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

使用说明:

https://www.w3cschool.cn/weixinapp/weixinapp-devtools.html

-项目初始文件:

1 pages, 小程序的页面组成,有index页面和 logs 页面,即欢迎页和日志页

Js文件,页面逻辑

Wxml文件,页面结构

Json文件,页面配置

Wxss文件,页面样式

2 utils 存放js文件,支持公共函数

3 app.js是小程序的脚本代码。监听并处理小程序的生命周期函数、声明全局变量,调用微信原生 API、网络超时时间、底部tab

4 app.json 是小程序的全局配置。配置小程序的页面组成,窗口背景色,导航条样式,默认标题。注意该文件不可添加任何注释。

5 app.wxss 是小程序的公共样式表。页面组件的 class 属性可以直接使用 app.wxss 中声明的样式规则。

6 project.config.json 在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

7 sitemap.json 开发者可以通过 sitemap.json 配置,或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索词条触发该索引时,小程序的页面将可能展示在搜索结果中。

8 readme.md 自行添加的关于项目的说明文件


微信小程序-基础组件

-组件定义

组件是视图层的基本组成单元。

组件自带一些功能与微信风格的样式。

一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内。

 Content goes here ...


-组件共同属性

属性名

类型

描述

注解

id

String

组件的唯一标示

保持整个页面唯一

class

String

组件的样式类

在对应的wxss中定义的样式类

style

String

组件的内联样式

可以动态设置的内联样式

hidden

Boolean

组件是否显示

所有组件默认显示

data-*

Any

自定义属性

组件上触发的事件时,会发送给事件处理函数

bind* / catch*

EventHandler

组件的事件

详见事件

 

微信小程序-容器组件

-视图容器 view

-可滚动视图容器 scroll-view

-滑块视图容器 swipe

-可移动区域 movable-area

-可覆盖文本视图容器 cover-view

-可覆盖图片视图容器 cover-image


微信小程序-内容组件

-图标icon

-文本text

-富文本rich-text

-进度条progress


微信小程序-表单组件

-按钮 button

-多选框 checkbox

多项选择器 checkbox-group

-表单form

将组件内的用户输入的switch input checkbox slider radio picker 提交。当点击 form 表单中 form-type 为 submit 的 button 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。

-输入框input

-标签label

用来改进表单组件的可用性,使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。for优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。目前可以绑定的控件有:

浏览 12
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报