微信小程序教程笔记2

微信小程序的视图与渲染

组件的基本使用
数据的绑定
渲染标签
模板的使用

first.wxml

<include src="../templates/head"/>
first page
<button type="default" hover-class="other-button-hover"> default </button>
<button type="primary" bindtap="btnClick">{{btnText}}</button>
<view wx:if="{{show}}">{{text}}1</view>
<view wx:else>{{text}}2</view>
<text>this is text</text>
<text>{{show}}</text>
<view wx:for="{{news}}" wx:for-item="newsitem" wx:for-index="ix">
recycling content
{{ix}}-{{newsitem}}
</view>
<import src="../templates/rear"/>
<template is="rear2" data="{{text:'导入设置的内容。。。'}}"/>

fist.js

Page({/*** 页面的初始数据*/data: {text:"this is text in js",btnText:"this is button text",show:"false",news:['a','b','c']},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},btnClick : function(){console.log("button is clicked");var isShow=this.data.show;console.log("isShow:" + isShow);var newsdata=this.data.news;newsdata.shift()this.setData({ text: "this is a new content", show:!isShow,news:newsdata })}
})

<text>
this is head wxml;
</text>

<template name="rear1">
this is rear1 content template;
</template><template name="rear2">
this is rear2 content template;-{{text}}
</template>

微信小程序教程笔记2相关推荐

微信小程序开发笔记一
微信小程序开发笔记一.微信小程序的结构 1.初识小程序 2.快捷键 3.查阅文档二.常用组件 1.input组件 2.button组件三.小程序中的函数 1.函数的两种定义方法 2.带参函数 3 ...
微信小程序开发-笔记
一.开发文件结构 1.根目录下有三个文件:app.js,app.json和app.wxss.一个小程序项目必须有的三个描述App的文件.这三个文件是应用程序级别的文件.这3个文件的意义: 表1.1 ...
一个C#程序员学习微信小程序的笔记
一个C#程序员学习微信小程序的笔记客户端打开小程序的时候,就将代码包下载到本地进行解析,首先找到了根目录的 app.json ,知道了小程序的所有页面. 在这个Index页面就是我们的首页,客户端在 ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
云开发（微信-小程序）笔记（十四）---- 收藏，点赞（上）
云开发(微信-小程序)笔记(十三)---- 注册登陆 1.简介点赞,收藏等都是程序的最简单的功能,在现实的应用中也很常见.这里我就来给大家介绍一下小程序的这个功能. 图标下载地址先去网站上http ...
微信小程序PHP注册,微信小程序教程之注册页面
微信小程序――Page Page()函数用来注册一个页面.接受一个object参数,其指定页面的初始数据.生命周期函数.事件处理函数等. object参数说明: 属性类型描述 data Objec ...
微信小程序开发笔记，你收藏了吗？
** 微信小程序开发笔记,你收藏了吗? ** 最近在开发微信小程序,把自己在项目中经常遇到的知识点记录下来,以便下次开发的时候查看. 开发小程序开发工具推荐vscode写代码,微信开发工具用于查看效果 ...
微信小程序开发笔记进阶篇④——getPhoneNumber 获取用户手机号码（小程序云）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.云函数五.程序流程一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码. 但是,因 ...
微信小程序开发笔记进阶篇⑤——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之前）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...

微信小程序教程笔记2

微信小程序教程笔记2相关推荐

最新文章

热门文章