1. 如何创建微信小程序 2. 如何搭建小程序页面 3. 如何获取小程序的数据和处理逻辑 4. 如何发布小程序应用
无论是前端开发还是后端开发,随着时间的推移,你总能总结出它的一些规律。前端开发主要有两个,页面展示和逻辑处理。如果是全流程开发,即如何创建项目,如何实现页面,如何实现数据采集和逻辑处理,如何打包上线。移动端还是前端,基本的开发流程由这四个步骤组成。所以在前端学习一个新的开发技术,只要解决了这四个问题就一切OK了,说说,我在学习微信小程序开发,如何利用这四个步骤快速上手开发
1 如何创建微信小程序
学习一门新技术,先看看它的开发文档小程序介绍
1.1 首先,您需要注册一个帐户。具体步骤请参考下图中的相关章节
注册一个帐户
1.2 小程序信息改进及配置小程序源码如何快速转为apk,具体步骤请参考下图中相关章节
小程序信息配置
1.3 完成以上工作后,下一步就是创建一个小程序项目
请看小程序开发步骤
创建小程序项目
至此,我们完成了第一个问题,接下来我们将解决如何构建小程序界面。
2.如何搭建小程序页面
小程序接口实现
框架的视图层用WXML 和WXSS 编写,由组件显示。
逻辑层的数据反映到视图中,视图层的事件同时发送给逻辑层。
WXML( ) 用于描述页面的结构。
WXS( ) 是一套用于小程序的脚本语言。结合WXML,可以构建页面的结构。
WXSS(样式表)用于描述页面的样式。
小程序的页面由 wxml 和 wxss 两个文件实现。wxml结构怎么写,请参考微信小程序组件
wxss负责样式控制,和css基本类似,支持flex布局,所以如果要开始搭建微信小程序的界面,最好熟悉html和css。
微信提供了很多界面组件。您无需一次全部学习。您可以使用一两个。当您需要其他人时,您可以先检查他们。这样可以节省学习时间,加深理解。至此,我们解决了第二个问题。我们来看第三个问题,数据逻辑怎么处理。
三个小程序如何获取数据及处理逻辑3.1 逻辑处理
数据定义
数据展示
通过js文件操作逻辑处理
一个服务仅仅显示界面是不够的天外神坛,它还需要与用户交互:响应用户的点击,获取用户的位置等等。在小程序中,我们通过编写JS脚本文件来处理用户操作。
{{ msg }}
当按钮被点击时,我们想在界面上显示msg为“Hello World”,所以我们在其上声明一个属性:,并在JS文件中声明一个响应点击操作的方法:
Page({
clickMe: function() {
this.setData({ msg: "Hello World" })
}
})
响应用户操作就这么简单。有关更详细的事件,请参阅文档 WXML - 事件。
此外,还可以在JS中调用小程序提供的丰富API。使用这些API,你可以很方便的调用微信提供的能力,比如获取用户信息、本地存储、微信支付等。在前面的例子中,wx是在pages/index/index.js中调用的。获取微信用户的头像和昵称,最后在界面上显示获取到的信息。更多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
}
使用方法请看下图
数据采集
数据如下图
数据展示
至此,我们解决了第三个问题。我们来看第四个问题。四 如何发布小程序应用
小程序发布文档说明
小程序发布步骤
至此,四个问题都解决了。总结:这篇文章的内容很简单。大部分官方文件都是借来的。其实这篇文章的目的不是教大家如何开发小程序,而是分享我学习新事物的方法和思路。互联网技术变化非常快。,我觉得一个人的能力不只是你的技术有多好,你要明白技术是用来做什么的,技术是用来解决现实生活中的问题的,一个好的程序员不是技术能力,而是解决问题的能力问题。只用一种技术是不可能解决问题的。这就要求你有很强的学习能力。针对不同的问题,使用不同的技术。即使您不熟悉所使用的技术,它也是解决问题的最佳方法。方法,这就要求你有快速学习和解决问题的能力。学习一门新技术,首先要把握主线,打通过程,然后在工作中慢慢熟悉和丰富对其细节的一些认知,所以在学习之前多问自己几个问题,我该怎么做学习,为什么要学习,如何学习等等。先思考后学习,事半功倍。至于如何学习微信小程序开发小程序源码如何快速转为apk,我问了自己以上四个问题。对于每个问题,我只需要了解大致内容即可。四个问题都解决之后,整个过程就过去了,以后慢慢来。我逐渐熟悉并了解了每个问题内容的细节。实际上,我花了不到一个下午的时间就想出了一个简单的演示。我所学的内容基本已经覆盖了微信小程序日常开发的80%。内容。这是我的一些学习经历。
最后一个小程序Demo
演示截图 |