美文网首页
微信小程序-起步(2)

微信小程序-起步(2)

作者: 上上啊上山莫要下河 | 来源:发表于2018-06-22 17:43 被阅读0次
这篇文章主要是说模板、WXS、事件、setData、样式

模板

  • 有可能被重复使用 动态 的wxml文件的代码结构,可以提出来放在跟pages同级的common文件里面
<template name="stringName">
  <view>{{name}}</view>
</template>

在index.wxml里面的这样引用
<import src="template.wxml"/> src写相对路径
<template is="stringName" data="{{name: 'Matt'}}"></template>

import 的作用域
import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。
如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。

这样的模板使用类似于声明一个函数,调用的时候可以传入参数
也可以使用ES6语法 参见 wxml模板使用

  • 有可能被重复使用的静态模板 也可以提出来放在跟pages同级的common文件里面
<view> ---我是一个 Header--- </view>

使用的话,哪里需要就在哪个相应的位置include
<include src="header.wxml"/>


WXS

是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。 (类似于js)
参见 wxs说明
这就意味着可以在wxml里面调用wsx里面的函数方法

//wxml调用
<wxs src="tool.wxs" module="tool"></wxs>

 <view
    wx:for="{{tool(names)}}"
  >{{item}}</view> 

//wxs文件
function createNames(names){
  var arr = names.split(',')
  return arr;
}
module.exports = createNames;

事件

  • bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。
<!--微信上的这个例子就很方便理解
点击 inner view 会先后调用handleTap3和handleTap2
(因为tap事件会冒泡到 middle view,而 middle view 阻止了 tap 事件冒泡,不再向父节点传递),
点击 middle view 会触发handleTap2,点击 outer view 会触发handleTap1。 -->

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

有的时候我们反而需要事件冒泡来帮助我们实现事件绑定,父级的bind:tap事件里面打印

//wxml
<view bind:tap="onTap" class="pressBtn" id="view" data-name="容器">
    <text id="text" data-name="文字"> 点按我可以打印信息</text>
  </view>
//js
onTap(event){
    console.log(event); //event的对象里面有currentTarget和target
  },

说明
1.currentTarget 组件源 真正点击的那个组件身上的一些属性,可以匹配id的属性 去绑定事件

image.png
2.target 是冒泡到最上层的组件身上的一些属性

样式

  • rpx 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
/** app.wxss src相对路径**/
@import "common.wxss";
.middle-p {
  padding:15px;
}

setData()

这个方法是page身上的方法
在js中 用this调用

onTap(){
  this.setData({
      num: Math.floor(magicNumber*1000)
    });
}
  • 这样做是做到数据改变,视图更新;微信的这个实现原理 并不像vue那样,是响应式的 ,这里需要自己手动的调用方法去更新视图
  • 而数据更新和页面更新并不是同步的过程,而是异步的过程
  • 但是执行完setData以后 data里面的数据就变了
 this.setData({
      magicNumber: Math.random()
    });

    let {magicNumber} = this.data;    //es6对象的解构赋值

    this.setData({
      num: Math.floor(magicNumber*1000)
    });

相关文章

  • 微信小程序-起步(2)

    这篇文章主要是说模板、WXS、事件、setData、样式 模板 有可能被重复使用 动态 的wxml文件的代码结构,...

  • 微信小程序起步

    小程序账号登录地址 得到AppID 下载开发者工具,安装 目录结构 pages 小程序的页面utils ...

  • 微信小程序开发(一)文件类型基础讲解

    @微信小程序-起步-官方文档 初始化第一个微信小程序项目结构:project_root.png文件基础类型分析.j...

  • 微信小程序浏览量可以刷吗,小程序刷uv访客,刷微信小程序注册

    微信小程序的访客量微信小程序刷用户量微信youtui2微信小程序刷uv访客刷微信小程序注册 微信开放平台基础部助理...

  • 浅谈微信矩阵

    微信体系矩阵: 1)微信公众服务号 比如:嵌入 小程序 「承载商城」 「会员体系」 2)微信小程序 微信小程序相当...

  • 小程序相关实用文章

    1、微信小程序开发常见之坑2、微信小程序联盟-微信小程序开发社区-小程序3、怎么在弹窗中加入输入框4、微信小程序实...

  • 小程序1——开启小程序之旅

    目录:1、用新的邮箱创建微信小程序公众平台2、在微信小程序公众平台,创建微信小程序,并获取微信小程序APPID3、...

  • 微信小程序-起步(1)

    有了第三个粉丝以后,令我٩(๑>◡<๑)۶鸡冻无比~ 感谢 我的粉丝们(~ ̄▽ ̄)~ 前面简单的准备工作部分就先不...

  • 微信小程序----基础起步

    ◆准备工作 首先需要在微信工作平台上申请一个账号:账号申请 根据指引填写好信息后就可以拥有自己的小程序账号了 登录...

  • 1-2 开篇以及课程特色介绍

    微信小程序介绍 1、本课程的特色 2、什么是微信小程序。 3、小程序的特点。也不是所有程序都适合微信小程序。 4、...

网友评论

      本文标题:微信小程序-起步(2)

      本文链接:https://www.haomeiwen.com/subject/cfokyftx.html