首页小程序开发正文

小程序开发快速创建页面（制作小程序页面）

小程序开发 2023-01-22T20:31:10 1573

本篇文章给大家谈谈小程序开发快速创建页面，以及制作小程序页面对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。本文目录一览： 1、如何快速开发个微信小程序

本篇文章给大家谈谈小程序开发快速创建页面，以及制作小程序页面对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、如何快速开发个微信小程序
2、怎么制作微信小程序？
3、如何开发小程序？
4、小程序使用 vant 快速创建页面
5、如何制作微信小程序的页面
6、怎么创建微信小程序

如何快速开发个微信小程序

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

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

然后呢就是开始一些准备的步骤，微信公众平台提供我们开发管理的功能微信工作平台

账号注册

小程序信息配置

请看小程序开发步骤

小程序项目的创建

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

然后最重要的，微信提供自己的开发者工具，不需要用chrome什么调试，微信开发者工具提供wxapi的调用测试能力，这些在chrome里面是测试不了的

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

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

WXML(WeiXin Markup language) 用于描述页面的结构。

WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

WXSS(WeiXin Style Sheet) 用于描述页面的样式。

小程序的页面是由wxml 和wxss这两个文件来实现的，wxml结构如何写请参考微信小程序组件

wxss是负责样式控制的，基本类似于css,支持flex布局，所以要想上手构建微信小程序的界面，最好要熟悉html ,css.

还有最重要的就是生命周期了

//index.js

Page({

data: {

text: "This is page data."

onLoad: function(options) {

// 页面创建时执行

onShow: function() {

// 页面出现在前台时执行

onReady: function() {

// 页面首次渲染完毕时执行

onHide: function() {

// 页面从前台变为后台时执行

onUnload: function() {

// 页面销毁时执行

onPullDownRefresh: function() {

// 触发下拉刷新时执行

onReachBottom: function() {

// 页面触底时执行

onShareAppMessage: function () {

// 页面被用户分享时执行

onPageScroll: function() {

// 页面滚动时执行

onResize: function() {

// 页面尺寸变化时执行

onTabItemTap(item) {

// tab 点击时执行

console.log(item.index)

console.log(item.pagePath)

console.log(item.text)

// 事件响应函数

viewTap: function() {

this.setData({

text: 'Set some data for updating view.'

}, function() {

// this is setData callback

})

// 自由数据

customData: {

hi: 'MINA'

}

})

微信提供的界面组件很多，没必要一下子全学会，会用一两个就行，其他的遇到需要的时候现查先做，这样又节约学习时间，又能够加深理解。到此第二个问题我们解决了，下面看第三个问题，数据逻辑如何处理。

数据定义

数据展现

逻辑处理是通过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 。

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

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

}

如何使用请看下图

数据获取

数据展现如下图

数据展现

到此，第三个问题我们就解决的了下面看第四个问题。

小程序发布文档说明

小程序发布步骤

到此四个问题都解决了。

总结：本文内容是很简单的，借用了大部分官方文档，其实本文目的不是教你学小程序开发，而是分享一下在学习一项新事物我的方法和思路，互联网技术变化是很快的，我觉得一个人的能力，不仅仅是你技术有多好，你要明白技术是用来干什么的，技术是用来解决现实生活中的问题的，一个好的程序员，不是技术能力，而是解决问题的能力，解决问题不可能只用一种技术，这就要求你的学习能力要强，针对不同的问题，使用不同的技术，哪怕使用的技术你不熟悉，但它是解决问题最好的方法，那就要求你有快速学习并解决问题的能力。

学习一项新技术，我们要先抓住主线，把流程搞通了，以后再在工作中慢慢的熟悉和丰富对它细节的一些认知，所以学一项东西前多问自己几个问题，我学什么，我为什么学，我怎么学，等。先思考后学习，一定会让你事半功倍。

对于怎么学习微信小程序开发，我问了自己上面的四个问题，每个问题，我只需要了解大体内容，四个问题都解决了，然后整个流程也就通了，以后也就是慢慢的对每个问题内容的细节慢慢的熟悉和了解了，其实花了不到一下午的时间，我就搞出了一个简单的demo出来了，了解的内容基本已经覆盖微信小程序日常开发80%的内容了。以上就是我的一点学习心得。

最后小程序Demo

Demo截图

首页

我的

点击我的任意条目，数据是从第三方聚合平台提供的api获取的

最后目前有很多的多端开发框架，背景大多是都是因为小程序开发的盛行

其他还有很多例如

阿里的rax

我们自己的ditto

小程序开发快速创建页面（制作小程序页面）

怎么制作微信小程序？

制作微信小程序操作如下：

工具/原料

iPhone13

IOS15.3.3

微信15.3.2

步骤如下：

1、打开手机“微信”软件，搜索“小程序开发”。

2、小程序开发搜索页面，打开“小程序助手”。

3、小程序助手页面，打开“开始创作”。

4、开始创作页面，根据“小程序需要”，定制开发小程序就可以了。

制作自己的微信小程序时需要注意的地方

1、主体选择

通常大家制作小程序主要有个人、企业这两种，个人小程序支持范围很有限，具体你可以查看微信小程序官方文档。而且个人小程序无法开通微信支付功能，所以建议大家还是注册企业主体小程序，这样你可以开通支付功能，而且可制作类型更丰富，比如常见的电商、点餐小程序等。

2、关于小程序名称

微信小程序名称可以由中文、数字、英文、空格、部分特殊符号组成，名称不得与公众平台已有的订阅号、服务号重复，如提示重名，需要更换名称设置（允许同主体下的小程序和公众号同名）。小程序名称要有自己特色，能让访客看明白你是干嘛的。

3、小程序设计

小程序设计应重点突出、流程明确，在设计时应该注意减少无关的设计元素对用户目标的干扰。小程序的每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容。要记住，小程序追求的是“小而美”，能让客户用完即走，不给他们制造负担。

4、如何实现客户的留存

通过签到打卡、消费领积分、积分商城兑换，来吸引用户积极获取积分及消耗积分。

以优惠的会员专享权益吸引更多的用户成为会员，如会员储值充多少送多少、门店所有商品会员全部打九折、向会员定期发放大额优惠券等。

可以将用户留存到公众号、微信群等，通过优质的内容、优惠活动推送持续影响客户，建立与客户的情感连接。

如何开发小程序？

微信版本升级后，打开微信，点击底部的“发现”这个菜单项，就会发现升级后的“发现”菜单里，增加了“小程序”这样一个功能。

2.点击打开小程序后，可以看到有附近的小程序和我的小程序，附近的小程序是所在定位周边的小程序。

下面的小程序列表可以看到的是我们之前打开过的一些小程序，如果有自己觉得很好用的小程序就可以点击左上角，添加到我的小程序里面。

3.微信小程序还有具有搜索功能，打开搜索页面可以输入想要找的小程序。

小程序使用 vant 快速创建页面

vant UI 组件库是有赞前端团队开发的一个 Vue 组件库，提供了一整套的 UI 基础组件和业务组件，通过 vant 可以快速搭建出风格统一的页面。

官方地址： vant UI 组件库

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

工具 - 构建 npm

效果：

内置样式：

Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。

添加1px 边框，为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。如果不是基于伪类实现的，则我们在添加的 1px 边框在 Retina 下默认是 2px 。

如何制作微信小程序的页面

制作微信小程序可以使用网站一键生成方式，进入凡客网了解相应文件功能后进行编辑即可完成。具体内容如下：

1、一键生成小程序比较简单，例如百度进入凡科网。

/iknow-pic.cdn.bcebos.com/37d12f2eb9389b506a5c852d8a35e5dde7116e29"target="_blank"title="点击查看大图"class="3fd9aaab4a576588 ikqb_img_alink"/iknow-pic.cdn.bcebos.com/37d12f2eb9389b506a5c852d8a35e5dde7116e29?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto"esrc=""/

2、选择“轻站小程序”，选择要制作的类型，点击“创建”。

/iknow-pic.cdn.bcebos.com/dc54564e9258d109f561cccdde58ccbf6d814dca"target="_blank"title="点击查看大图"class="aaab4a57658868a9 ikqb_img_alink"/iknow-pic.cdn.bcebos.com/dc54564e9258d109f561cccdde58ccbf6d814dca?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto"esrc=""/

3、进行文字图片和板块位置等的修改，保存后审核发布即可。

/iknow-pic.cdn.bcebos.com/0b55b319ebc4b745dd72d269c0fc1e178b8215ee"target="_blank"title="点击查看大图"class="4a57658868a9b1b5 ikqb_img_alink"/iknow-pic.cdn.bcebos.com/0b55b319ebc4b745dd72d269c0fc1e178b8215ee?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto"esrc=""/

4、总结如下。

/iknow-pic.cdn.bcebos.com/fc1f4134970a304e72edc585dec8a786c8175c85"target="_blank"title="点击查看大图"class="658868a9b1b5c185 ikqb_img_alink"/iknow-pic.cdn.bcebos.com/fc1f4134970a304e72edc585dec8a786c8175c85?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto"esrc=""/

注意事项：

1.小程序名称可以由中文、数字、英文。长度在3-20个字符之间,一个中文字等于2个字符。

2.小程序名称不得与公众平台已有的订阅号、服务号重复。如提示重名,请更换名称进行设置。

3.小程序名称在账号信息设置时完成,请谨慎设置,一旦设置暂不支持修改。

4.更换名称进行设置。如果企业商标,组织名称等名称被侵权,可通过公众平台侵权投诉流程发起投诉。

5.个人开发者无法申请微信小程序;目前微信仅支持企业、政府、媒体、其他组织申请。