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

分类：小程序时间：2018-02-10浏览：3331

微信小程序开发文档

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

设置入口文件

{
  "pages": [
    "src/pages/index/index"
  ]
}

自动生成目录

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

数据的绑定

wxml(view)中使用 {{text}} js中定义

data: {
    text:"我是内容"
  
  },

事件设置

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

{{text1}}

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

  /**
   * 页面的初始数据
   */
  data: {
    text1:"我是内容",
    btn:"按钮"
  },
  btnClick: function() {
    this.setData({text1:"这是新的内容"})
  }
})

渲染

条件标签:wx:if="{{true}}" true:显示 false:不显示

{{text1}}1

{{text1}}2

实现取反功能 wxml

{{text1}}

data: {
    text1:"我是内容",
    btn:"按钮",
    show:true,
  },

btnClick: function() {
    
    var isShow = this.data.show;
    this.setData({ text1: "这是新的内容" ,show:!isShow})

  }

循环标签wx:for="{{news}}" wxml


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

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 继承模版文件(注意后面的/)

2.继承部分模板目录(随意):pages--templates-footerr.wxml

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