1概况
就是对当前app的全局设置
{
"pages":[ // 每个页面的位置 也就是路由
"pages/index/index",
"pages/logs/logs"
],
"window":{ // 所有页面的颜色 字体等
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
IDE的一些配置
{
"description": "项目配置文件。",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true,
"newFeature": true
},
"compileType": "miniprogram",
"libVersion": "2.0.4",
"appid": "wxcfe87b665b068838",
"projectname": "test",
"isGameTourist": false,
......可以自行设置一些每个页面单独的json设置
具体设置同样参照app.json的链接
和vue很像
使用WX:来在html页面中操作dom
<!--wxml-->
<view> {{message}} </view> <!--这个就是WXML-->// page.js
Page({
data: { // data是默认名字
message: 'Hello MINA!' // 数据绑定
}
})- 每一页的数据来自当前页的page中的data
- 使用{{ }} 输入数据 可以在字符串内"{{ }}"双引号内输出
- =={{true/false}}==不要直接写"true/false
- 可以进行三元运算、算数运算、逻辑判断、字符串运算、数据路径(obj.key/array[0])
- 还可以组合成新的数组、对象
- ==扩展运算符==不同于js，这里可以展开对象
<view wx:for="{{array}}">
{{index}}: {{item.message}} <!--默认index和item-->
</view>Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})-
可以给item或者index取名字
<!--这是一个99乘法表--> <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"> <!--这里把item取名i--> <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"> <view wx:if="{{i <= j}}"> {{i}} * {{j}} = {{i * j}} </view> </view> </view>
是一个控制属性 控制该组件的隐藏和显示
<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
<!--多个组件可以用一个block标签包围-->
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>// page.js
Page({
data: {
view: 'MINA'
}
})==注意==
如果需要频繁切换的情景下，用
hidden更好，如果在运行时条件不大可能改变则wx:if较好。
<template name="staffName"> <!--name属性定义模板名字 相当于id-->
<view>
FirstName: {{firstName}}, LastName: {{lastName}}
</view>
</template>
<template is="staffName" data="{{...staffA}}"></template> <!--使用模板 is属性传入name-->
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>// page.js
Page({
data: {
staffA: {firstName: 'Hulk', lastName: 'Hu'},
staffB: {firstName: 'Shang', lastName: 'You'},
staffC: {firstName: 'Gideon', lastName: 'Lin'}
}
})-
引用模板
- import
<!-- item.wxml --> <template name="item"> <text>{{text}}</text> </template> <!--在另外一个wxml文件就可以这样引用--> <import src="item.wxml"/> <template is="item" data="{{text: 'forbar'}}"/> <!--取名字为item的那个模板-->
- include 相当于继承
<!-- header.wxml --> <view> header </view> <!-- footer.wxml --> <view> footer </view> <!-- index.wxml --> <include src="header.wxml"/> <!--会把除了template和wxs标签的内容全部复制过来 显示在这个位置--> <view> body </view> <include src="footer.wxml"/>
<view bindtap="add"> {{count}} </view> <!--使用如bindtap属性绑定一个点击事件函数-->Page({
data: {
count: 1
},
add: function(e) {
this.setData({
count: this.data.count + 1
})
}
})- 除了下面列表的都不是冒泡事件
| touchstart | 手指触摸动作开始 |
|---|---|
| touchmove | 手指触摸后移动 |
| touchcancel | 手指触摸动作被打断，如来电提醒，弹窗 |
| touchend | 手指触摸动作结束 |
| tap | 手指触摸后马上离开 |
| longpress | 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发 |
| longtap | 手指触摸后，超过350ms再离开（推荐使用longpress事件代替） |
| transitionend | 会在 WXSS transition 或 wx.createAnimation 动画结束后触发 |
| animationstart | 会在一个 WXSS animation 动画开始时触发 |
| animationiteration | 会在一个 WXSS animation 一次迭代结束时触发 |
| animationend | 会在一个 WXSS animation 动画完成时触发 |
| touchforcechange | 在支持 3D Touch 的 iPhone 设备，重按时会触发 |
-
事件的写法是先确定
bind还是catch，然后确定类型如top等，最后组成bindtap或者catchtap -
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡 -
在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。 书写方式： 以
data-开头，多个单词由连字符-链接，不能有大写设置的data会传递给事件对象，相当于自定义属性
data-aa-bb 在事件对象里会被转化为 dataset=dataAaBb 。如果是大写会变成小写
WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内，或以 .wxs 为后缀名的文件内
一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现 ，和node一样，这样其他文件也能引用require而标签可以这样<wxs src="./../tools.wxs" module="tools" />
- 可以在所有版本的小程序中运行。
- wxs 与 javascript 是不同的语言。
- wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
- wxs 函数不能作为组件的事件回调。
- 由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
<!--wxml-->
<wxs module="m1">
var msg = "hello world";
module.exports.message = msg;
</wxs>
<view> {{m1.message}} </view> <!--页面输出hello world--><!--wxml-->
<!-- 下面的 getMax 函数，接受一个数组，且返回数组中最大的元素的值 -->
<wxs module="m1">
var getMax = function(array) {
var max = undefined; // 这句也重要
for (var i = 0; i < array.length; ++i) {
max = max === undefined ? // 两个连续的三元表达式
array[i] :
(max >= array[i] ? max : array[i]);
}
return max;
}
module.exports.getMax = getMax;
</wxs>
<!-- 调用 wxs 里面的 getMax 函数，参数为 page.js 里面的 array -->
<view> {{m1.getMax(array)}} </view>- 其他都和js一样
全局样式与局部样式
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作 用在对应的页面，并会覆盖 app.wxss 中相同的选择器。
-
尺寸单位
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 |
-
样式导入
使用
@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
示例代码：
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
/**其他内联什么的和css一样**/
<view style="color:{{color}};" />
<view class="normal_view" />目前支持的选择器有：
| 选择器 | 样例 | 样例描述 |
|---|---|---|
| .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 组件前边插入内容 |
组件列表
基础组件分为以下七大类：
视图容器(View Container)：
| 组件名 | 说明 |
|---|---|
| view | 视图容器 |
| scroll-view | 可滚动视图容器 |
| swiper | 滑块视图容器 |
基础内容(Basic Content)：
| 组件名 | 说明 |
|---|---|
| icon | 图标 |
| text | 文字 |
| progress | 进度条 |
表单(Form)：
| 标签名 | 说明 |
|---|---|
| button | 按钮 |
| form | 表单 |
| input | 输入框 |
| checkbox | 多项选择器 |
| radio | 单项选择器 |
| picker | 列表选择器 |
| picker-view | 内嵌列表选择器 |
| slider | 滚动选择器 |
| switch | 开关选择器 |
| label | 标签 |
导航(Navigation)：
| 组件名 | 说明 |
|---|---|
| navigator | 应用链接 |
多媒体(Media)：**
| 组件名 | 说明 |
|---|---|
| audio | 音频 |
| image | 图片 |
| video | 视频 |
地图(Map)：**
| 组件名 | 说明 |
|---|---|
| map | 地图 |
画布(Canvas)：**
| 组件名 | 说明 |
|---|---|
| canvas | 画布 |