微信小程序学习阶段一

一、初识小程序

1、小程序项目结构

小程序项目里的

app.json用于书写全局配置信息，里头的pages数组一般用于创建新的页面，pages/文件夹名字/文件名字，一般文件夹名字需要和文件名字保持一致，小程序首先会显示出现在pages数组对应的第一个页面

app.wxss书写全局样式

app.js配置文件

utils书写插件

sitemap和project.config.json属于配置文件

images存放图片

pages放置小程序页面，小程序中每一个页面都是一个独立的文件夹，每一个页面文件夹包含四个文件wxml wxss js json，wxml类似于之前的html书写页面结构，wxss类似于之前的css书写页面样式

2、tabBar

tabBar用于切换页面，list数组配置切换页面，list数组里pagePath设置页面路径，text设置名字，icon Path设置icon图片路径，selectedIconPath设置点击变换icon图片。

3、wxml

text引入文字

button按钮

input输入框

icon小图标

image引入图片

view容器

3.1、wxss

常用css样式

width设置宽度

height设置高度

color设置文本颜色

background-color设置背景颜色，background-image设置背景图片，不能本地路径,可以使用网络地址，或者base64位图片，

border设置边框，dotted - 定义点线边框，dashed - 定义虚线边框，solid - 定义实线边框

，double - 定义双边框

margin设置外边距

padding设置内边距

4、使用js定义数据

{ {变量}}使用双大括号定义js数据，.js文件里的data定义数据变量

5、按钮绑定事件

使用bindtap绑定一个点击事件，在.js文件中定义事件

6、wx:for

使用wx:for遍历生成text或view，<text wx:for="{ {list}}" bindtap="fn" data-id="{ {index}}">{ {item}}-{ {index}}</text>

wx:for="{ {所要遍历的数据}}"，{ {index}}表示数组下标，{ {item}}代表数据的每一项

7、使用点击事件写一个选项卡

<view>

    <text class="{ {num==index?'current':''}}" wx:for="{ {list}}" bindtap="change" data-id="{ {index}}">{ {item}}</text>

</view>

data: {

    list:['我的','热门','游戏','故事','娱乐','知识'],

    num:0

  },

  change(e){

    this.setData({

        //重新给num赋值

      num:e.target.dataset.id

    })

  }

8、wx:if和hidden

wx