小程序模板網(wǎng)

微信小程序開發(fā)基礎(chǔ)(1)

發(fā)布時(shí)間：2018-06-08 09:52 所屬欄目：小程序開發(fā)教程

微信小程序開發(fā)文檔

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

設(shè)置入口文件


微信小程序開發(fā)文檔
https://mp.weixin.qq.com/debug/wxadoc/dev/

設(shè)置入口文件

自動生成目錄

在pages下新建一個(gè)文件夾(a1),然后在app.json中寫入此入口文件,編譯即可在文件夾(a1)自動生成文件

數(shù)據(jù)的綁定

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

js中定義


data: {
    text:"我是內(nèi)容"
  
  },

事件設(shè)置

效果:點(diǎn)擊按鈕,切換文字

wxml


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

js

// pages/firstpage/first.js
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    text1:"我是內(nèi)容",
    btn:"按鈕"
  },
  <span style="color: #ff6600;">btnClick: function() {
    this.setData({text1:"這是新的內(nèi)容"})
  }</span>
})

渲染

條件標(biāo)簽:wx:if=”{{true}}”

true:顯示  false:不顯示
 


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


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

實(shí)現(xiàn)取反功能

wxml


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

js

data: {
    text1:"我是內(nèi)容",
    btn:"按鈕",
    show:true,
  },
 


btnClick: function() {
    
    var isShow = this.data.show;
    this.setData({ text1: "這是新的內(nèi)容" ,show:!isShow})

  }

循環(huán)標(biāo)簽wx:for=”{{news}}”

wxml


<view wx:for="{{news}}">
{{index}}-{{item}}//前面是索引,后面是值
</view>

js

date:{
news: ['aa', 'bb', 'cc'],
}

動態(tài)刪除第一個(gè)值

btnClick: function() {

    var newsData = this.data.news
    newsData.shift();

    
    var isShow = this.data.show;
    this.setData({ text1: "這是新的內(nèi)容" ,show:!isShow,news:newsData})
  }

模版(繼承)

1.繼承整個(gè)模版

建立模版文件

目錄(隨意):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"/>

導(dǎo)入時(shí)自定義數(shù)據(jù)

<import src="../templates/footer" />
<template is="footer1" data="{{text:'我是自定義數(shù)據(jù)'}}"/>



易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址：http://22321a.com/wxmini/doc/course/24515.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
QQ在線咨詢