微信小程序快速开发：一如何创建一个微信小程序二如何获取数据，处理逻辑四 |昱远信息系统开发

1 如何创建微信小程序 2 如何搭建小程序页面 3 如何获取小程序数据及处理逻辑 4 如何发布小程序应用

无论是前端开发还是后端开发，久而久之，你总能总结出它的一些规律。前端开发主要有两个，页面展示和逻辑处理。如果是全流程开发，即如何创建项目，如何实现页面，如何实现数据采集和逻辑处理，如何打包上线。移动端还是前端，基本的开发流程由这四个步骤组成。所以在前端学习一个新的开发技术，只要解决了这四个问题，那么一切都会好起来的，说说，我正在学习微信小程序开发，这四个步骤怎么用 快速入门发展

如何创建微信小程序

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

1.1 首先，你需要注册一个账号。具体步骤请参考下图中的相关章节

帐号注册

1.2 小程序信息改进及配置，具体步骤请参考下图相关章节

小程序信息配置

1.3 上述工作完成后 支付宝小程序开发 ，下一步就是创建一个小程序项目

参见小程序开发步骤

创建一个小程序项目

至此，我们完成了第一个问题，接下来我们将解决如何构建小程序界面。

如何搭建小程序页面

小程序接口实现

框架的视图层用WXML和WXSS编写，由组件展示。

将逻辑层的数据反应成一个视图，同时将视图层的事件发送给逻辑层。

WXML（微信标记语言）用于描述页面的结构。

WXS（微信脚本）是一套针对小程序的脚本语言微信小程序快速开发，结合WXML，可以构建页面的结构。

WXSS（微信样式表）用于描述页面的样式。

小程序的页面由wxml和wxss两个文件实现。 wxml结构怎么写，请参考微信小程序组件

wxss负责样式控制，基本类似于css，支持flex布局，所以如果要开始搭建微信小程序的界面，最好熟悉html和css。

微信提供了很多界面组件。您不需要一次学习所有这些。您可以使用一两个。当您需要其他人时，您可以先检查它们。这样可以节省学习时间并加深您的理解。至此，我们解决了第二个问题。再来看看第三个问题，数据逻辑怎么处理。

三个小程序如何获取数据及处理逻辑3.1逻辑处理

数据定义

数据展示

通过js文件进行逻辑处理

一个服务仅仅显示界面是不够的，它还需要与用户交互：响应用户的点击，获取用户的位置等等。在小程序中，我们通过编写JS脚本文件来处理用户操作。

{{ msg }}
点击我

当按钮按钮被点击时，我们想在界面上显示msg为“Hello World”，所以我们在按钮上声明一个属性：bindtap 微信小程序开发 ，并在JS文件中声明clickMe方法来响应点击操作：

p>

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

响应用户操作就这么简单。更详细的事件请参考文档 WXML – Events 。

此外，还可以在JS中调用小程序提供的丰富API。使用这些API微信小程序快速开发，可以轻松调用微信提供的能力微信小程序快速开发，如获取用户信息、本地存储、微信支付等。在前面的快速入门示例中，在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
}

使用方法见下图

数据采集

数据如下图所示

数据展示

至此，我们解决了第三个问题。我们来看第四个问题。四如何发布小程序应用

小程序发布文档说明

小程序发布步骤

到目前为止，所有四个问题都已解决。总结：这篇文章的内容很简单。大部分官方文件都是借来的。其实这篇文章的目的不是教大家学习小程序开发，而是分享我学习新事物的方法和思路。互联网技术的变化非常快，我觉得一个人的能力不仅仅是你的技术有多好，你要明白技术是用来做什么的，技术是用来解决现实生活中的问题的，一个好的程序员不是技术能力，而是解决问题的能力。只用一种技术是不可能解决问题的。这就要求你有很强的学习能力。针对不同的问题，使用不同的技术。即使你不熟悉所使用的技术，它也是解决问题的最佳方式，这需要你快速学习并解决问题。学习一门新技术，首先要把握主线，打通过程，然后在工作中慢慢熟悉和丰富对其细节的一些认知，所以在学习之前多问自己几个问题，我该怎么做学习，为什么要学习，如何学习等等。先思考后学习，事半功倍。至于如何学习微信小程序开发，我问了自己以上四个问题。对于每个问题，我只需要了解大致内容即可。四个问题都解决了，整个过程就过去了，以后慢慢来。慢慢地，我熟悉并了解了每个问题内容的细节。事实上，我用了不到一个下午的时间就想出了一个简单的演示。所学的内容已经基本涵盖了微信小程序的日常开发。 80%的内容。这些是我的一些学习经历。

最后一个小程序演示

演示截图

【昱远信息系统定制开发】