本文作者:DurkBlue

微信小程序基础开发(1)

DurkBlue2019-12-121934
微信小程序基础开发(1)摘要: 微信小程序开发文档https://mp.weixin.qq.com/debug/wxadoc/dev/设置入口文件自动生成目录在pages下新建一个文件夹(a1),然后在app.j...

微信小程序开发文档

https://mp.weixin.qq.com/debug/wxadoc/dev/

设置入口文件

微信小程序基础开发(1) 第1张

微信小程序基础开发(1) 第2张

自动生成目录

在pages下新建一个文件夹(a1),然后在app.json中写入此入口文件,编译即可在文件夹(a1)自动生成文件

数据的绑定

wxml(view)中使用  {{text}}

js中定义

微信小程序基础开发(1) 第3张

事件设置

效果:点击按钮,切换文字

wxml

微信小程序基础开发(1) 第4张

js

微信小程序基础开发(1) 第5张


渲染

条件标签:wx:if=”{{true}}”

true:显示  false:不显示

<view wx:if="{{false}}">{{text1}}1</view>


<view wx:if="{{show}}">{{text1}}</view>

js

data: {

    text1:"我是内容",

    btn:"按钮",

    show:true,

  },


btnClick: function() {

    

    var isShow = this.data.show;

    this.setData({ text1: "这是新的内容" ,show:!isShow})


  }

循环标签wx:for=”{{news}}”

wxml

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

{{index}}-{{item}}//前面是索引,后面是值

</view>

js

date:{

news: ['aa', 'bb', 'cc'],

}

动态删除第一个值

btnClick: function() {


    var newsData = this.data.news

    newsData.shift();


    

    var isShow = this.data.show;

    this.setData({ text1: "这是新的内容" ,show:!isShow,news:newsData})

  }


模版(继承)

1.继承整个模版

建立模版文件

目录(随意):pages–templates-header.wxml

继承模版文件(注意后面的/)

<include src="../templates/header" />


2.继承部分模板

目录(随意):pages–templates-footerr.wxml

<template name="footer1">

我是footer1

</template>


<template name="footer2">

我是footer2

</template>

继承模版文件(注意后面的/)

<import src="../templates/footer" />

<template is="footer1"/>

导入时自定义数据

<import src="../templates/footer" />

<template is="footer1" data="{{text:'我是自定义数据'}}"/>

<import src="../templates/footer" />

<template is="footer1" data="{{text:'我是自定义数据'}}"/>



此篇文章由DurkBlue发布,撰文不易,转载请注明来处
文章版权及转载声明

作者:DurkBlue本文地址:https://hepuhua.cn/post/223.html发布于 2019-12-12
文章转载或复制请以超链接形式并注明出处DurkBlue博客

赞(0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享