微信小程序小结

Posted 2020-09-03

1?数据绑定 {{}} 

<view id="item-{{id}}"> </view> 

2?条件语句 wx:if wx:elif wx:else 

   <view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view> 

注意: <block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属 性。 

3?列表循环 wx:for ，默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item ，wx:for 也可以嵌套 

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

</view> 

使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名 

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.message}} 

</view> 

 

模板 WXML 提供模板(template),可以在模板中定义代码片段,然后在不同
的地方调用。 模板在外部引用 import include 

<template name="msgItem"> <view> 

<text> {{index}}: {{msg}} </text> 

<text> Time: {{time}} </text> </view> 

</template> 

使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入 

<template is="msgItem" data="{{...item}}"/> 

 

is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板 ，模板拥有自己的作用域,只能使用 data 传入的数据 

<block wx:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? ‘even‘ : ‘odd‘}}"/> 

</block> 

import 可以在该文件中使用目标文件定义的 template,如: 在 item.wxml 中定义了一个叫 item 的 template 

<!-- item.wxml -->

 <template name="item"> 

<text>{{text}}</text> 

</template> 

在 index.wxml 中引用了 item.wxml,就可以使用 item 模板 

<import src="item.wxml"/>
<template is="item" data="{{text: ‘forbar‘}}"/> 

注意C import B,B import A,在 C 中可以使用 B 定义的 template,在 B 中可以使用 A 定义的 template, 

但是 C 不能使用 A 定义的 template 

 

include 可以将目标文件除了<template/>的整个代码引入,相当于是拷贝到 include 位置 

<!-- index.wxml -->
<include src="header.wxml"/>

 <view> body </view> 

<include src="footer.wxml"/> 

 

<!-- header.wxml -->

 <view> header </view> 

 

<!-- footer.wxml -->

 <view> footer </view> 

 

微信小程 pages 页面启动顺序配置，排在第一位的是首页

{
"pages":[ 

      "pages/news/news", 

      "pages/index/index", 

      "pages/logs/logs" 

] } 

utils 中自定义模块 

微信小程序中中,utils 下面一个 javascript 文件中定义的变量、函数,都只在这个文件 内部有效。当需要从此 JS 文件外部引用这些变量、函数时,必须使用 exports 对象进行暴 露。使用者要用 require()命令引用这个 JS 文件 

//暴露给外部

module.exports = { 

     formatTime: formatTime 

}

//外部引用
var Api = require(‘../../utils/api.js‘); 

 

如data里面写了一些默认数据如果想更改需要使用以下方式

changeName: function(){

    this.setData({

        name:”这是setData里面改变后的name值”

    })

}

 

官方推荐使用标签view和text代替传统的div和p。使用传统的无法使用id选择器，以及微信会自动转换成行内元素，需要自己加display:block转换。

注意微信的使用单位是用rpx，建议用iphone6尺寸来开发。

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

绑定图片不能用img标签，只能用image标签

 

绑定事件在dom中用bindtap，function中可以用event接收当前点击的对象。

如<view bindtap=“run” data-id=‘12345’ data-attr=‘attr1’>

在方法中接收额外参数

function run(event){

event.currentTarget.dataset

}

 

冒泡事件列表 

touchstart 手指触摸 

touchmove 手指触摸后移动 

touchcancel 手指触摸动作被打断,如来电提醒,弹窗

touchend 手指触摸动作结束 

tap 手指触摸后离开 

longtap 手指触摸后,超过 350ms 再离开 

 

bind事件默认不会阻止事件冒泡，如需要阻止，可以用catch绑定事件上，如catchtap

 

注:除上表之外的其他组件自定义事件都是非冒泡事件,如 <form/> 的 submit 事件,<input/> 的 input 

事件, <scroll-view/> 的 scroll 事件 

 

request 数据请求 

wx.request({
     url: ‘http://www.phone.com/appapi.php?a=getPortalCate‘, 

     data: { 

id: ‘11‘ , name: ‘222‘ 

}, header: { 

‘Content-Type‘: ‘application/json‘ 

}, 

success: function(res){ 

    console.log(res.data.result) 

} }) 

 

request POST 数据提交 

wx.request({
     url: ‘http://www.57lehuo.com/upload.php‘,          method:"POST",
data: { 

     username: ‘张三 1111‘ , 

     age: ‘222‘ 

}, 

header: {
‘Content-Type‘: ‘application/json‘ 

},
success: function(res) { 

     console.log(res.data) } 

})