微信小程序笔记(一)

微信小程序

git：https://github.com/opendigg/awesome-github-wechat-weapp

案例：https://www.ctolib.com/search/?co=1&term=%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F&catalogId=138&pg=1

文档：https://mp.weixin.qq.com/cgi-bin/loginpage?t=wxm2-login&lang=zh_CN

1、视图与渲染

1.1 点击事件bindtap

<button bindtap="btnClick">{{text}}</button>

1.2 渲染标签

1.2.1   if...else...

<view wx:if="{{show}}">1</view>
<view  wx:else > 2 </view>

1.2.2 循环

<view wx:for="{{news}}">{{item}}<view>

<view wx:for="{{news}}" wx:for-itme="vo">{{vo}}</view>

<view wx:for="{{news}}" wx:for-item="vo" wx:for-index="ix"> {{ix}} - {{vo}} </view>

 1.3模板

<include src="../templates/header" />   等同于直接复制文件中的代码

 

<import src="../templates/footer" />
<template is="footer2" data="{{text:'导入设置的内容...'}}" />可以设置引入哪个模板

 2、微信小程序事件

2.1、 事件类别

点击事件 tap

• 长按事件 longtap------冒泡事件
• 触摸事件 touchstart   tochend   touchmove   touchcancel-----冒泡事件
• 其他  submit  input .......

 2.2、  事件绑定

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

3、路由跳转

3.1、navigator组件做页面链接

<navigator url="logs?id=2" hover-class="navigator-hover">跳转到新页面</navigator>
<navigator url="logs?id=2" redirect hover-class="other-navigator-hover">在当前页打开(关闭了当前页面)

url:应用内的跳转链接

redirect:是否关闭当前页面

hover-class:指定点击时的样式类，当hover-class="none"时，没有点击效果

3.2、 wx.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。

wx.navigateTo({
   url:"../logs/logs?id=1"
})

3.3、wx.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

wx.redirectTo({
  url: 'test?id=1'
})

3.4、wx.navigateBack()

关闭当前页面，回退到前一页面。

 4、组件

4.1、view组件

view是微信小程序中使用最普通的组件，可以认为是HTML中的div，划分页面结构的不同层次。

4.2、Text组件

Text组件用于展示文字，也是使用较多的组件。由于微信小程序没有p、span等标签，只能通过Text组件来实现文字的展示。

除了Text组件以外的其他组件都无法长按选中。

Text组件无法解析HTML。

4.3、Image组件

Image组件可以在微信小程序中展示图片，支持外链。

 5、组件模块化设计

通过WXML的import和include来使用文件模板

使用WXSS的@import来引用WXSS文件

使用JS的require来引用JS文件