您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > 小程序

做一个纯前端小程序,只需要简单几步

时间:2022-05-23 15:05:51  来源:  作者:泽哥爱晓钊

最近有人私信我小程序怎么做,报价是多少之类的话题。

首先明确一点,我肯定是不会接普通的私活,帮老板做经营性质的小程序,我想要做的是合作共赢的方式,具体细节有时间可以重开一篇文章详细讲讲诸如此类的话题:为什么有些人做小程序可以那么便宜,有些人却表示做不了。高喊着家人们不要当韭菜的商家,究竟有没有趁机割韭菜?

本篇的重点是如何最快捷地做一个只包含前端的小程序。

做小程序,你都需要准备什么

  • 第一步:确定技术栈

不论哪种技术,只要能在市场中占据一席之地,那它必然有过人之处,只要还没有完全掌控市场,那它也必然有缺陷。所以一般拿技术栈来斗嘴的,大部分是大学生或者小公司职工,为啥?因为稍微上点规模的企业里,你没得选。

企业用啥你就得用啥,平台都是搭好的,技术可选择性只有面向不同场景的A和B,不会同一场景,让你去做多选。

我的技术栈选型是:uniApp+uview,工具是hbuilder+微信开发者工具。做工具类、信息展示类、动画交互类的小程序其实都可以不需要后端服务,当然我是因为服务器备案还没通过,没办法在生产环境部署后端。如果需要做后端服务,我选JAVA或者nodejs,一个图稳,一个图爽。

  • 第二步:准备必要的开发环境

这里只阐述重点环节,具体操作就不展开描述了。因为这些乱七八糟的其实并没有技术含量,但是篇幅可能还不短,自行百度或者根据官网去一步步做好就行。大致需要:

  1. hbuilder的appid:每使用hbuilder创建一个项目都需要生成一个,这是hbuilder创建的,用于项目发布成app时需要填写的唯一标识。
  2. 微信小程序的appid:这是微信公众平台上申请的,配套的还有一个appSecret,用于在微信小程序系统内,为你的小程序做唯一标识。
  3. 微信公众号平台:使用邮箱申请账号,确定账号类型为小程序,然后设置自己的微信号为管理员,小程序账号绑定的是邮箱,管理员绑定的是微信号,即一个邮箱对应一个小程序,一个微信号可以管理多个小程序。
  4. hbuilder中配置:配置微信开发者工具运行路径,方便直接运行到开发者工具中查看真机效果等。
  5. 微信开发者工具配置:主要配置右上角的详情,如图:
做一个纯前端小程序,只需要简单几步

 

被我红色抹掉的,就是需要手动配置的。然后是本地配置,下图是我的配置可作参考,再看一眼设置里的服务端口有没有打开:

做一个纯前端小程序,只需要简单几步

 


做一个纯前端小程序,只需要简单几步

 

至此,与真正开发无关的准备工作已经完毕。

uniapp开发小程序

  1. 使用hbuilder创建空项目,vue版本建议选择vue2,decloud官网有一些模板项目,如果需求接近,也可以作为参考:
做一个纯前端小程序,只需要简单几步

 

如果按照官网都配置好,那这个最简单的小程序就已经完成了。

创建项目后,直接运行在微信开发者工具,如果报错:Cannot read property 'forceUpdate' of undefined,说明微信小程序的appid没有配置,把自己申请的小程序appid拿过来,就能运行成功。

我用自己微信申请了一个测试号,编译然后真机运行,它是这样的:

做一个纯前端小程序,只需要简单几步

 

打开过一次后,可以在小程序搜索页找到我们的测试小程序,如图:

做一个纯前端小程序,只需要简单几步

 

至此,一个最简单的,只有一个页面的小程序就完成了。如果只是做个简单的企业展示页、小商店的活动信息展示之类的静态页面,那无非是多设计几个页面而已。

完结,撒花!!!各位只需要展示页面的看官老爷可以离场了

如果你还有理想,想要实现更复杂的小程序,那么请继续阅读,一个项目级小程序还需要做哪些配置。

2.修改基础的配置文件和入口文件:

如果没有vue基础,建议只完成用作展示的静态页面就好,如果需要开发稍微复杂的逻辑,请先打好基础。

最好把es6、htmlcss这些都熟悉了,因为es6是理解模块化引入、promise对象、各种新语法的基础,html、css是修改组件的基础,uniapp和uview两个组件库有坑,尤其是uview框架,想要实现好的效果,经常需要修改源码。

配置文件要点:

  • pages.json:需要进行路由跳转的页面都需要在这里配置。
  • mAIn.js:全局挂载的js工具都需要在这里配置。我的示例代码如下,为了方便浏览,删除了部分特例代码,整体分为三部分:引入资源(import)、挂载资源(prototype)、按要求使用插件(use),理解有困难就把我代码抄过去,增增减减做一个自己的,不过我觉得我用到的已经是开发必备的工具类了。
import Vue from 'vue'
import App from './App'
import lodash from 'lodash'
import uviewAdapter from '@/common/util/uview-adapter';

// vuex
import store from './store'

// 引入全局uView
import uView from '@/uni_modules/uview-ui'

import mixin from './common/mixin'
import * as config from './common/config.js'
import {
	util
} from './common/util.js' //自己写的工具类

//引入的资源挂载到全局属性上
Vue.prototype.$store = store
Vue.prototype.$util = util
Vue.prototype.$config = config
Vue.prototype._ = lodash
Vue.prototype.$uview = uviewAdapter

Vue.config.productionTip = false

App.mpType = 'app'
Vue.use(uView)

Vue.mixin(mixin)

const app = new Vue({
    store,
    ...App
})
// 引入请求封装
require('./common/request/index')(app) 

app.$mount()

3.app.vue:需要按照uview的要求增加两个全局样式,代码如下:

<style lang="scss">

/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */

@import "@/uni_modules/uview-ui/index.scss";

@import "@/common/css/ui/uni-my.scss"

</style>

4.基本配置完成后,需要写一些自己的工具类、请求拦截、响应拦截这些,篇幅过长,不展开讲解了,参考uview和uniapp官网自行配置吧。

项目实战

我们把所有的环境准备、代码准备、工具准备等等工作都完成了,剩下的无非就是写代码逻辑了,对于大部分程序员来说,这应该是最熟悉的吧。

因为小程序正式上线,后端服务必须是备案过的域名,我的私人备案审核还没结果,所以也只能做些不需要后端的小工具了。

依托上面搭好的架子,我这两周抽时间做了两个小工具,

第一个工具——翻译工具:

支持简体中文、繁体中文、英文、韩文、日文之间的互译,大家可以微信搜索“李泽的工具包”自行体验,如图所示:

做一个纯前端小程序,只需要简单几步

 

第二个工具——时间戳转换:

当前时间转换为时间戳,选择时间转换为时间戳,同样搜索“李泽的工具包”可体验,如图所示:

做一个纯前端小程序,只需要简单几步

 

大家如果有什么建议,或者平时想用的小工具,但是又都需要收费,可以私信或者评论区留言,我会综合考虑时间成本、价值之后,决定是否采纳并开发。



Tags:小程序   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
京东小程序数据中心架构设计与最佳实践
一、京东小程序是什么京东小程序平台能够提供开放、安全的产品,成为品牌开发者链接京东内部核心产品的桥梁,致力于服务每一个信任我们的外部开发者,为不同开发能力的品牌商家提...【详细内容】
2024-03-27  Search: 小程序  点击:(19)  评论:(0)  加入收藏
我们一起解锁小程序开发新姿势
如今,鸿蒙开发日益受到广大开发者的关注,而小程序开发也早已成为互联网领域的热门话题。那么,我们不禁要问:是否有可能将这两者融为一体,将小程序开发的便捷与高效带入鸿蒙生态中...【详细内容】
2024-03-20  Search: 小程序  点击:(23)  评论:(0)  加入收藏
2024年微信小程序分账全攻略:对接流程详解,轻松实现资金分配
在微信小程序运营中,分账功能对于实现多方收益分配、优化资金流转至关重要。那么,微信小程序如何分账?又有哪些对接流程呢?跟着小编去看看吧!一、微信小程序分账概述微信小程序分...【详细内容】
2024-03-15  Search: 小程序  点击:(20)  评论:(0)  加入收藏
微信宣布规范“公众号文章诱骗点击小程序,骗取广告收益”行为
IT之家 3 月 14 日消息,微信公众平台运营中心今日发文称,平台近期发现部分创作者在文章中使用不完全或擦边的标题、擦边的封面和无意义或不完整的内容,并插入诱导性小程序卡片...【详细内容】
2024-03-15  Search: 小程序  点击:(19)  评论:(0)  加入收藏
抖音加大对短剧小程序推荐力度
新腕儿联合鞭牛士报道,2月26日消息,短剧近期数据平稳且持续发展,抖音加强了对短剧抖音小程序的推荐力度。以碧海剧场小程序为例,抖音短剧小程序向用户申请更多「通知信息」权限...【详细内容】
2024-02-26  Search: 小程序  点击:(44)  评论:(0)  加入收藏
一段微信小程序前端与后端连接的代码,带注解
微信小程序的前端和后端连接通常涉及到使用微信小程序提供的网络请求API与后端服务器进行通信。以下是一个简单的示例,展示如何使用微信小程序的前端代码向后端发送请求并处...【详细内容】
2024-01-24  Search: 小程序  点击:(59)  评论:(0)  加入收藏
小程序必须要安装部署SSL证书吗?
自2017年9月21日,微信发布一则《关于公众平台接口不再支持HTTP方式调用的公告》。明确表示,为保证数据传输安全,提高业务安全性,公众平台不再支持HTTP方式调用。应避免影响正常...【详细内容】
2024-01-02  Search: 小程序  点击:(75)  评论:(0)  加入收藏
一文了解什么是微信小程序
如果您无需下载和管理即可获得像原生 iOS 或 Android APP 一样流畅的体验会怎样?腾讯通过微信小程序实现了这一替代方案。一、什么是微信小程序?它们与原生应用程序和 H5 迷你...【详细内容】
2023-12-26  Search: 小程序  点击:(103)  评论:(0)  加入收藏
微信商户号怎么开通?教你申请0.2%费率商户码对接小程序公众号
随着移动互联网的快速发展,电子支付方式已经深入到人们的生活中,而微信支付作为中国领先的移动支付平台,在无数的应用场景中发挥着重要作用。这里先免费分享一个0.2费率的商户...【详细内容】
2023-12-16  Search: 小程序  点击:(64)  评论:(0)  加入收藏
小程序开发需要多少钱?小程序开发的真实成本:报价案例、费用价格表与开发周期解析
分享一个上海客户的微信小程序定制开发的需求,销售课程与相关商品。项目分为后台管理系统和小程序前端,功能不是太复杂,周期大概1个月,费用3万。大家可能比较关心几个地方,比如一...【详细内容】
2023-12-11  Search: 小程序  点击:(119)  评论:(0)  加入收藏
▌简易百科推荐
京东小程序数据中心架构设计与最佳实践
一、京东小程序是什么京东小程序平台能够提供开放、安全的产品,成为品牌开发者链接京东内部核心产品的桥梁,致力于服务每一个信任我们的外部开发者,为不同开发能力的品牌商家提...【详细内容】
2024-03-27  dbaplus社群    Tags:小程序   点击:(19)  评论:(0)  加入收藏
我们一起解锁小程序开发新姿势
如今,鸿蒙开发日益受到广大开发者的关注,而小程序开发也早已成为互联网领域的热门话题。那么,我们不禁要问:是否有可能将这两者融为一体,将小程序开发的便捷与高效带入鸿蒙生态中...【详细内容】
2024-03-20  前端充电宝  微信公众号  Tags:小程序   点击:(23)  评论:(0)  加入收藏
一段微信小程序前端与后端连接的代码,带注解
微信小程序的前端和后端连接通常涉及到使用微信小程序提供的网络请求API与后端服务器进行通信。以下是一个简单的示例,展示如何使用微信小程序的前端代码向后端发送请求并处...【详细内容】
2024-01-24    简易百科  Tags:代码   点击:(59)  评论:(0)  加入收藏
小程序必须要安装部署SSL证书吗?
自2017年9月21日,微信发布一则《关于公众平台接口不再支持HTTP方式调用的公告》。明确表示,为保证数据传输安全,提高业务安全性,公众平台不再支持HTTP方式调用。应避免影响正常...【详细内容】
2024-01-02  云诏    Tags:小程序   点击:(75)  评论:(0)  加入收藏
一文了解什么是微信小程序
如果您无需下载和管理即可获得像原生 iOS 或 Android APP 一样流畅的体验会怎样?腾讯通过微信小程序实现了这一替代方案。一、什么是微信小程序?它们与原生应用程序和 H5 迷你...【详细内容】
2023-12-26  小文智能    Tags:微信小程序   点击:(103)  评论:(0)  加入收藏
小程序开发需要多少钱?小程序开发的真实成本:报价案例、费用价格表与开发周期解析
分享一个上海客户的微信小程序定制开发的需求,销售课程与相关商品。项目分为后台管理系统和小程序前端,功能不是太复杂,周期大概1个月,费用3万。大家可能比较关心几个地方,比如一...【详细内容】
2023-12-11  久码小程序开发  今日头条  Tags:小程序   点击:(119)  评论:(0)  加入收藏
小程序技术分享:安全机制与运行机制
小程序凭借其高曝光率、开发成本低、运行更流畅等优势和特点,一经推出就被广泛使用,面对小程序的火爆,自然而然地,就有很多开发者转战小程序领域,本文主要带大家了解下小程序运行...【详细内容】
2023-12-07  前端实习生Findan    Tags:小程序   点击:(142)  评论:(0)  加入收藏
微信小程序的编译原理
2021年来,随着科技的进步,人们的生活水平也在不断提高。现在,微信小程序已经成为了现代人生活中不可或缺的一部分,它可以帮助我们更方便地查找信息,购物,预订机票和酒店,进行社交等...【详细内容】
2023-12-06  前端实习生Findan    Tags:小程序   点击:(134)  评论:(0)  加入收藏
模板小程序和订制开发小程序的区别?
相比外卖APP,外卖小程序是不用下载到手机的,所以对于用户来说更方便一点。简单方便的程序用户才更愿意使用。现在不少商家越来越重视外卖小程序开发,想通过外卖小程序冲进这片...【详细内容】
2023-11-24  重庆洺宸传媒    Tags:小程序   点击:(240)  评论:(0)  加入收藏
一分钟学会用宝塔面板搭建小程序
宝塔面板搭建小程序怎样用?想要使用宝塔面板搭建小程序?这里是实用教程,帮助您快速上手。在本教程中,我们将扼要了解宝塔面板的基础知识,并一步步演示怎么搭建一个小程序。第一步...【详细内容】
2023-11-15    网络  Tags:小程序   点击:(196)  评论:(0)  加入收藏
站内最新
站内热门
站内头条