我是如何快速上手微信小程序开发的

作者: 当前明月 | 来源:发表于2018-10-12 12:13 被阅读202次

微信小程序快速开发上手
我是如何快速上手微信小程序开发的
mpvue 微信小程序富文本解析
微信小程序云开发(一)
egret微信小游戏相关
小程序·云开发项目开发经验分享
小程序Cloud开发归纳
微信小程序云开发数据库批量导入解决中文乱码
微信小程序开发系列六：微信框架API的调用
2018-04-20

一如何创建一个微信小程序

二如何搭建小程序页面

三小程序如何获取数据，处理逻辑

四如何发布小程序应用

无论是前端开发，还是后端开发，时间长了，你总会能总结出它的一些规律的，对于前端开发主要就两条，页面展现，逻辑处理。如果是全流程开发的话，那就是，如何创建项目，页面如何实现，数据获取和逻辑处理如何实现，如何打包上线。移动端或者前端，基本开发流程就这个四个步骤。所以在在前端方面去学习新一门开发技术，只要你解决了这四个问题，那一切就OK了，下面我就讲一下，我在学习微信小程序开发，如何用这四步法快速上手开发的

一如何创建一个微信小程序

学习一门新技术先看下它的开发文档小程序介绍

1.1 首先要先注册一个账号，具体步骤请看下图的相关章节

账号注册

1.2 小程序信息完善和配置，具体步骤请看下图的相关章节

小程序信息配置

1.3 上面的工作做完后，接下来才开始创建一个小程序项目

请看小程序开发步骤

小程序项目的创建

到此第一个问题我们就算完成了，接下来解决小程序界面如何搭建。

二如何搭建小程序页面

小程序界面实现

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。
将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。
WXML(WeiXin Markup language) 用于描述页面的结构。
WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
WXSS(WeiXin Style Sheet) 用于描述页面的样式。

小程序的页面是由wxml 和wxss这两个文件来实现的，wxml结构如何写请参考微信小程序组件
wxss是负责样式控制的，基本类似于css,支持flex布局，所以要想上手构建微信小程序的界面，最好要熟悉html ,css.
微信提供的界面组件很多，没必要一下子全学会，会用一两个就行，其他的遇到需要的时候现查先做，这样又节约学习时间，又能够加深理解。到此第二个问题我们解决了，下面看第三个问题，数据逻辑如何处理。

三小程序如何获取数据，处理逻辑

3.1 逻辑处理

数据定义

数据展现

逻辑处理是通过js文件来操作的
一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

点击 button 按钮的时候，我们希望把界面上 msg 显示成 "Hello World"，于是我们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应这次点击操作：

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

响应用户的操作就是这么简单，更详细的事件可以参考文档 WXML - 事件。
此外你还可以在 JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。在前边的 QuickStart 例子中，在 pages/index/index.js 就调用了 wx.getUserInfo 获取微信用户的头像和昵称，最后通过 setData 把获取到的信息显示到界面上。更多 API 可以参考文档小程序的API 。

3.1 数据获取

现在几乎每个应用都需要从后端获取数据，那么小程序如何获取呢，当然是通过网路操作了。我们封装了小程序的网络操作

const app = getApp()

const request = (url, options) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: `${app.globalData.host}${url}`,
      method: options.method,
      data: options.method === 'GET' ? options.data : JSON.stringify(options.data),
      header: {
        'Content-Type': 'application/json; charset=UTF-8'
        // 'x-token': 'x-token'  // 看自己是否需要
      },
      success(request) {
        if (request.data.error_code === 0) {
          resolve(request.data)
        } else {
          reject(request.data)
        }
      },
      fail(error) {
        reject(error.data)
      }
    })
  })
}

const gets = (url, options = {}) => {
  return request(url, { method: 'GET', data: options })
}

const post = (url, options) => {
  return request(url, { method: 'POST', data: options })
}

const put = (url, options) => {
  return request(url, { method: 'PUT', data: options })
}

// 不能声明DELETE（关键字）
const remove = (url, options) => {
  return request(url, { method: 'DELETE', data: options })
}

module.exports = {
  gets,
  post,
  put,
  remove
}

如何使用请看下图