微信小程序開發基礎(1)
發布時間：2018-06-08 09:52 所屬欄目：小程序開發教程
微信小程序開發文檔
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="../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:'我是自定義數據'}}"/>
|
