微信小程序基础知识

一、简介

微信小程序是张小龙所带领的腾讯广州研发中心产品团队打造，2017年才发布。

微信小程序特点：

1. 无需安装和卸载
2. 制作成本低
3. 内存小、运行快,操作便利快捷
4. 容易部署,具有丰富的延展性

微信小程序打开的方式：通过微信搜索小程序、通过好友的分享、还有通过小程序的链接打开。

二、注册和下载小程序

微信小程序官网

注意事项：

1. 首先要记住自己的appid 自己写项目时要用到
2. 自己写练习项目时，建项目时尽量选择不使用云服务
3. 下载时，尽量选择稳定版的
4. 每个页面设置一个文件夹，里面有wxml相当于以前的html，wxss相当于以前的css，js文件是逻辑，json文件时数据
5. 同时与pages文件夹同级的还有：app.js全局逻辑处理、app.json全局配置文件、app.wxss全局样式文件

三、基本操作

小知识：

1. 新建文件夹后，点击鼠标右键选择新建pape会自动生成四个文件
2. 新建文件时尽量写和文件夹一样的名字
3. 可以在app.json文件中调换文件路径的前后
4. 在微信小程序中是没有div等一些标签的

3.1数据绑定

新建文件在新建文件的js文件中定义数据

data: {
    name:'tom',
    pic:'/images/1.jpg'
  },

在新建文件的wxml文件中使用三元表达式{{}}渲染

<text>{{name}}</text>
<image src="{{pic}}"></image>

3.2三元运算符

新建文件在新建文件的js文件中定义数据

 data: {
    score:56
  },

在新建文件的wxml文件中渲染

<text>{{score>=60?'及格':'不及格'}}</text>

3.3算术运算

js中：

 data: {
    num:23.44
  },

wxml中渲染：

<text>{{num*100}}</text>

3.4事件绑定

3.4.1点击更改数据

给标签绑定事件

<text>{{num}}</text>
<button bindtap="getRes">点击+1</button>

js中处理事件

data: {
    num:80
  },// 定义数据
  getRes(){
   this.setData({
     num:this.data.num+1
   })
  }
备注：
事件中更改data中的数据需要用this.setData方法

3.4.2事件传值

按钮绑定事件

<button bindtap="getTotal" data-id="{{10}}">点击</button>

js中处理事件

getTotal(e){
    console.log(e)//触发的事件对象
   let id= e.target.dataset.id;//获取点击事件中传递的参数
    console.log(id)
  }

3.4.3input数据绑定

wxml中标签

<input value="{{msg}}" bindinput="handleInput" class="inp"></input>
<view>{{msg}}</view>

js中处理事件

 data: {
    msg:'hello'
  },
  handleInput(e){
   console.log(e.detail.value)
   this.setData({
    msg:e.detail.value
   })
  },

3.4.4bindtap和catchtap的区别

微信小程序中没有click事件的，移动端一般使用tap事件，bindtap和catchtap都可以绑定事件，区别是bindtap绑定事件会发生冒泡现象，catchtap不会。

3.5循环操作

1.用默认的item和index实现

wxml

<view wx:for="{{goodList}}" wx:key="index">
   <view>{{item.id}}</view>
   <view>{{item.pname}}</view>
   <view>{{item.price}}</view>
</view>

js data中定义

data: {
    goodList:[
      {id:1,pname:'洗衣机',price:5000},
      {id:2,pname:'电冰箱',price:3000},
      {id:3,pname:'彩电',price:5000},
      {id:4,pname:'空调',price:6000}
    ]
  }

2.自己定义当前项和索引

<view wx:for="{{goodList}}" wx:for-index="idx" wx:for-item="myitem">
   <view>{{myitem.id}}</view>
   <view>{{myitem.pname}}</view>
   <view>{{myitem.price}}</view>
</view>


data中数据不变

3.6条件渲染

• 布尔类型控制元素的显示和隐藏

<view wx:if="{{isShow}}">显示</view>
<view wx:else>隐藏</view>

data中定义数据：

 data: {
    isShow:false
  }

备注 isShow为true的时候，第一个标签显示，为false的时候，第二个元素隐藏。

• 多个条件

wx:if  wx:elif  wx:else

data中定义数据如下：

  data: {
    score:45
  },

wxml中视图如下：

<view wx:if="{{score>=80}}">优异</view>
<view wx:elif="{{score>=60}}">良</view>
<view wx:else>差劲</view>

• block控制多个元素的显示和隐藏

有的时候我们需要一次性控制多个元素的显示和隐藏需要用到block标签，这个标签在页面上不会显示，只是为了集中控制。

wxml中视图内容如下：

<block wx:if="{{isShow}}">
  <text>我是标题内容</text>
  <view>我是主体内容</view>
</block>

data中数据如下：

  data: {
    isShow:true
  }

• hidden控制元素的显示和隐藏

data中定义布尔值如下：

  data: {
    isShow:true
  },

wxml中视图内容如下：

<view hidden="{{isShow}}">我是页面上面的内容</view>

备注 data中数据是true，那么view标签的内容就会隐藏，如果data中的数据为false，那么view标签的内容就会显示。

3.6.1wx:if和hidden的区别

1. 运行方式不同 wx:if是动态创建和移除元素的方式来实现元素的显示和隐藏，hidden是通过更改元素的display:block；和display:none；来控制元素的显示和隐藏。
2. 效率不同 频繁切换时候建议使用hidden，但是如果条件较多的时候建议使用wx:if等。

四、常用视图标签

4.1view

view标签相当于我们以前学习的div，是块元素，一般搭配我们学过的伸缩布局来实现。

4.2scroll-view滚动效果

wxml

<scroll-view class="scroll-box" scroll-y>
  <view>导航1</view>
  <view>导航2</view>
  <view>导航3</view>
  <view>导航4</view>
  <view>导航5</view>
  <view>导航6</view>
</scroll-view>

wxss设置样式

.scroll-box{
  width: 100px;
  height:200px;
}
.scroll-box view{
  width:100px;
  height:40px;
  background-color: pink;
  border:1px solid #000;
}

4.3swiper-item实现轮播图

wxml

<swiper indicator-dots="true" 	indicator-active-color="red" 	autoplay 	interval="3000">
  <swiper-item>
    <image src="/images/1.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/2.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/3.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/4.jpg"></image>
  </swiper-item>
</swiper>

备注：swiper的具体属性可以在官网上查看

4.4button

<button type="primary">测试</button>
type按钮的样式类型 primary绿色
<button type="primary" plain>测试</button>
plain按钮是否镂空，背景色透明
<button type="primary" size="mini" plain>测试</button>
sizi设置按钮的大小 mini小尺寸

备注：其他属性可以在官网上查看

五、小程序样式

5.1rpx

微信小程序中的单位是rpx(responsive pixel的缩写)，这个小程序独有的单位。

以iphone6为例，因为基本上所有的移动端都是以iphone6的尺寸为基准单位。

iPhone6的换算是1px = 2rpx.

5.2全局样式

比如我们在写页面的时候需要初始化一些样式，那么我们在根目录下面新建common文件夹，里面新建common.css,里面写一个初识化代码。

别的wxss文件需要使用初始化样式文件的时候写入

@import "commom/common.wxss";

六、全局配置

6.1app.json文件

6.1.1window属性配置

• 设置导航栏背景色和文字内容：

navigationBarBackgroundColor  设置导航栏背景色
navigationBarTitleText 设置导航栏文字颜色

• 下拉刷新 app.json中配置

  "window":{
    "enablePullDownRefresh":true
  },

备注：其他的属性可以从官网上查看

6.1.2tabBar设置

{
  "pages":[
    "pages/index/index",
    "pages/search/search"
  ],
  "tabBar": {
    "list":[
      {
        "pagePath": "pages/index/index",
        "text":"首页",
        "iconPath": "/images/tabs/icon1.png",
        "selectedIconPath":"/images/tabs/icon1-active.png"
      },
      {
        "pagePath": "pages/search/search",
        "text":"搜索页",
        "iconPath": "/images/tabs/icon2.png",
        "selectedIconPath":"/images/tabs/icon2-active.png"
      }
    ]
  },
这样做可以实现两个页面的跳转

备注：其他属性和属性的具体说明可以在官网上查看