微信小程序开发零基础入门

一、小程序概述

微信小程序是一种新型的轻应用，无需安装即可使用，可以在微信聊天会话界面中直接进入。小程序具有轻量、快捷、省流量、不占内存等特点，成为了越来越多企业和个人的开发选择。

小程序开发拥有较高的技术门槛，但只要不断学习，积累，就可以逐渐提高技术水平。在本文中，我们将会介绍一些基础概念和基本操作，以及一些实用技巧，帮助初学者快速入门。

二、小程序开发环境配置

在开始小程序开发之前，我们需要先进行开发环境的配置。

1、下载并安装小程序开发者工具。

2、创建小程序项目。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <div>
        <p>页面内容</p>
    </div>
</body>
</html>

3、安装并引入微信小程序官方UI库 WXML。

<template name="footer">
  <view class="container">
    <view class="footer">
      <view class="ucenter">
        <navigator hover-class="none" url="/pages/mine/mine">
          <image src="/images/icon/user.png" />
          <text>个人中心</text>
        </navigator>
      </view>
      <navigator hover-class="none" url="/pages/index/index" class="ft-nav">
        <image src="/images/icon/home.png" />
        <text>首页</text>
      </navigator>
    </view>
  </view>
</template>

三、小程序基本概念

1、WXML（WeiXin Markup Language）是微信小程序页面结构语言，类似于HTML。

<view>
  <view class="item">
    <image src="../../images/icon/user.png" class="item-img"/>
    <text class="item-txt">个人中心</text>
  </view>
</view>

2、WXSS（ WeiXin Style Sheets）是微信小程序页面样式表描述语言，类似于CSS。

.item-img{
  width: 50px;
  height: 50px;
  margin: 0 10px 0 20px;
}
.item-txt{
  color: #333;
  font-size: 16px;
}

3、JavaScript 语言。

Page({
  data: {
    message: 'Hello World!'
  },
  onLoad: function () {
    console.log('onLoad')
  }
})

四、小程序API的使用

1、页面生命周期函数。

常用的生命周期函数有：

onLoad：监听页面加载
onShow：监听页面显示
onReady：监听页面初次渲染完成
onHide：监听页面隐藏
onUnload：监听页面卸载

Page({
  onLoad: function () {
    console.log('onLoad')
  },
  onShow: function () {
    console.log('onShow')
  }
})

2、注册小程序组件。

//注册一个名为 test 的组件
Component({
  properties: {
    text:{
      type: String,
      value: "default value"
    }
  },
  methods: {
    onTap: function() {
      console.log("text:", this.properties.text);
    }
  }
})

3、自定义组件的使用。

<test text="this is test."></test>

五、小程序实用技巧

1、在代码中使用事件委托。

<view bindtap="handleTap">
  <view class="item">
    <image src="../../images/icon/user.png" class="item-img"/>
    <text class="item-txt">个人中心</text>
  </view>
  <view class="item">
    <image src="../../images/icon/cart.png" class="item-img"/>
    <text class="item-txt">购物车</text>
  </view>
</view>

handleTap: function(e){
  var target = e.target,
      id = target.dataset.id;
  console.log(id);
}

2、使用 ES6 的 Promise 解决回调地狱问题。

new Promise(function(resolve, reject){
  wx.request({
    url: 'http://localhost:8080/posts/1',
    success: function(res){
      resolve(res.data);
    },
    fail: function(){
      reject();
    }
  })
}).then(function(data){
  console.log(data);
}).catch(function(){
  console.log('fail');
});

3、封装 request。

function request(url, data={}, method='GET'){
  return new Promise(function(resolve, reject){
    wx.request({
      url,
      data,
      method,
      success: function(res){
        resolve(res);
      },
      fail: function(error){
        reject(error);
      }
    })
  })
}

request('https://jsonplaceholder.typicode.com/posts/1')
  .then(function(res){
    console.log(res.data);
  })
  .catch(function(error){
    console.log(error);
  })