微信小程序 MINA

最新推荐文章于 2024-03-31 21:10:33 发布

Guan ri

最新推荐文章于 2024-03-31 21:10:33 发布

阅读量769

点赞数 1

本文链接：https://blog.csdn.net/weixin_43775626/article/details/100547976

版权

mina框架

框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

1 .1. 小程序文件结构和传统web对比

结构	传统web	微信小程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	Javascript	Javascript
配置	无	JSON

通过以上对比得出，传统web 是三层结构。而微信小程序是四层结构，多了一层 配置.json

1.2基本的项目目录

2.配置介绍

一个小程序应用程序会包括最基本的两种配置文件。一种是全局的 app.json 和页面自己的 page.json

注意：配置文件中不能出现注释

2.1全局配置app.json https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。普通快速启动项目里边的 app.json 配置

{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}

2.2page.json

这里的 page.json 其实用来表示页面目录下的 page.json 这类和小程序页面相关的配置。

开发者可以独立定义每个页面的一些属性，如顶部颜色、是否允许下拉刷新等等。

页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 `#000000`
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 `black` / `white`
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 `dark` / `light`
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新。详见 Page.onPullDownRefresh
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px。详见 Page.onReachBottom
disableScroll	Boolean	false	设置为 `true` 则页面整体不能上下滚动；只在页面配置中有效，无法在 `app.json` 中设置该项

3.视图层

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

基础组件:https://developers.weixin.qq.com/miniprogram/dev/component/index.html

事件系统:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

4.数据绑定

<view> {{ message }} </view>

Page({
data: {
message: 'Hello MINA!'
}
})

组件属性

Page({
data: {
id: 0
}
})

bool类型

不要直接写 checked="false"，其计算结果是一个字符串

三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

算数运算

Page({
data: {
a: 1,
b: 2,
c: 3
}
})

逻辑判断

字符串运算

<view>{{"hello" + name}}</view>

注意

花括号和引号之间如果有空格，将最终被解析成为字符串

列表渲染

的变量名默认为 item wx:for-item 可以指定数组当前元素的变量名

下标变量名默认为 index wx:for-index 可以指定数组当前下标的变量名

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

Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})

<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>

wx:key

提高效率使用的

wx:if

在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：

hidden

类似 wx:if

频繁切换用 hidden

不常使用用 wx:if

WXSS

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

与 CSS 相比，WXSS 扩展的特性有：

尺寸单位
样式导入

8.1. 尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

**示例代码：*

/** common.wxss **/
.small-p {
padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

选择器

目前支持的选择器有：

选择器	样例	样例描述
.class	`.intro`	选择所有拥有 class="intro" 的组件
#id	`#firstname`	选择拥有 id="firstname" 的组件
element	`view`	选择所有 view 组件
element, element	`view, checkbox`	选择所有文档的 view 组件和所有的 checkbox 组件
::after	`view::after`	在 view 组件后边插入内容
::before	`view::before`	在 view 组件前边插入内容

基本组件

https://developers.weixin.qq.com/miniprogram/dev/component/

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类。当 `hover-class="none"` 时，没有点击态效果

<view hover-class="h-class">
点击我试试
</view>

.h-class{
background-color: yellow;
}

text

显示普通的文本 text只能嵌套text

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选
decode	Boolean	false	是否解码

代码

  <text selectable="{{false}}" decode="{{false}}">
    普&nbsp;通
  </text>

image

图片标签，image组件默认宽度320px、高度240px

注意：该标签其实是 web中的图片标签和背景图片的结合！！！并且不支持以前的web中的背景图片的写法！！！

属性名	类型	默认值	说明
src	String		图片资源地址，支持云文件ID（2.2.3起）
mode	String	'scaleToFill'	图片裁剪、缩放的模式
lazy-load	Boolean	false	图片懒加载。只针对page与scroll-view下的image有效

mode 有效值：

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

模式	值	说明
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。
缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变
裁剪	top	不缩放图片，只显示图片的顶部区域
裁剪	bottom	不缩放图片，只显示图片的底部区域
裁剪	center	不缩放图片，只显示图片的中间区域
裁剪	left	不缩放图片，只显示图片的左边区域
裁剪	right	不缩放图片，只显示图片的右边区域
裁剪	top left	不缩放图片，只显示图片的左上边区域
裁剪	top right	不缩放图片，只显示图片的右上边区域
裁剪	bottom left	不缩放图片，只显示图片的左下边区域
裁剪	bottom right	不缩放图片，只显示图片的右下边区域

swiper

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

微信内置有轮播图组件

实例:

<swiper-item class="swiperstyle">

</navigator>

</swiper-item>

</block>

</swiper>

默认宽度 100% 高度 150px

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
interval	Number	5000	自动切换时间间隔

.swiper

滑块视图容器。

swiper-item

滑块

默认宽度和高度都是100%

navigator

导航组件类似超链接标签

属性名	类型	默认值	说明
target	String	self	在哪个目标上发生跳转，默认当前小程序，可选值self/miniProgram
url	String		当前小程序内的跳转链接
open-type	String	navigate	跳转方式

open-type 有效值：

值	说明
navigate	保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面
redirect	关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。
switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch	关闭所有页面，打开到应用内的某个页面
navigateBack	关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
exit	退出小程序，target="miniProgram"时生效

自定义组件

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

创建自定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成

10.1.1. 声明组件

首先需要在 json 文件中进行自定义组件声明

{
"component": true
}

编辑组件

同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式

注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

<view class="inner">
{{innerText}}
</view>
<slot></slot>

/* 这里的样式只应用于这个自定义组件 */
.inner {
color: red;
}

注册组件

在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法

Component({
properties: {
// 这里定义了innerText属性，属性值可以在组件使用时指定
innerText: {
type: String,
value: 'default value',
}
},
data: {
// 这里是一些组件内部数据
someData: {}
},
methods: {
// 这里是一个自定义方法
customMethod: function(){}
}
})

使用自定义组件

首先要在页面的 json 文件中进行引用声明。还要提供对应的组件名和组件路径

{
// 引用声明
"usingComponents": {
// 要使用的组件的名称 // 组件的路径
"component-tag-name": "path/to/the/custom/component"
}
}

插件 wechat-sinsppet 图标file icone

注意: app.json全局配置中不能写注释

1.是否开启全局下拉刷新enablepulldownRefresh 在APP.JSON的window中配置

2.bool (标签中要使用布尔类型必须要加上两个大括号,要不然布尔值不会生效.)

花括号和引号之间必须不要有间隔,否则被解析成字符串,

渲染 wx:for wx:for="{{item}}"

如果循环的是一个数组,那么index就是索引, 对象index=key 属性名

wx:key是用来提高效率用的

rpx 750的屏幕1px=2rpx

引入文件

引入第三方样式文件引入外部文件必须是相对路径@import "../../../xxx "

引入全局样式文件在app.wxss中加入的样式文件中就不用写文件的样式了

按下样式改变hover-class="corred"

长按复制需要设置才行 selectable="{{true}}"

图片标签有默认宽高默认没有懒加载

<image mode="xxx" src=""> //mode是默认值

sweiper默认是有宽高的

绑定点击事件bindtab

修改变量的方法使用setData

this,setDta({

myata:"data"

})

自定义组件---模块的复用

1.创建组件

新建组件文件夹 components 里面写很多小组件

在自定义组件中的标签中使用插槽slot , <slot ></slot > 默认情况下，一个组件的wxml只可能有一个slot

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

此时，可以在这个组件的wxml中使用多个slot，以不同的 name 来区分。

2.声明组件---在json文件中声明

3.注册组件--在自定义组件的js中使用component()来注册

4.使用组件自定义组件在首页json文件中

{

"usingComponents": {

"w-popup": "/components/w-ui/w-popup/index" //w-popup要使用组件名称 /组件路径

"disableSwipeBack": true

}

首页中使用<w-popup>这是文字</w-popup>

Guan ri

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫