258资源分享网

微信小程序开发文档

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

设置入口文件 微信小程序开发文档 https://mp.weixin.qq.com/debug/wxadoc/dev/ 设置入口文件  

自动生成目录

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

数据的绑定

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

js中定义

data: { text:"我是内容" },  
事件设置

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

wxml

{{text1}} <button open-type="contact" <span style="color: #ff6600;">bindtap="btnClick"</span>>{{btn}}</button>  

js
// pages/firstpage/first.js Page({ /** * 页面的初始数据 */ data: { text1:"我是内容", btn:"按钮" }, <span style="color: #ff6600;">btnClick: function() { this.setData({text1:"这是新的内容"}) }</span> })  

渲染

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

true:显示  false:不显示
 

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

<view wx:else>{{text1}}2</view>  

实现取反功能

wxml

<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=http://www.yiyongtong.com/archives/"../templates/header" />  

2.继承部分模板

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

<template name="footer1"> 我是footer1 </template> <template name="footer2"> 我是footer2 </template>  

继承模版文件(注意后面的/)
<import src=http://www.yiyongtong.com/archives/"../templates/footer" /> <template is="footer1"/>  

导入时自定义数据
<import src=http://www.yiyongtong.com/archives/"../templates/footer" /> <template is="footer1" data="{{text:'我是自定义数据'}}"/>