一、微信小程序制作教程?
1.懂代码的小伙伴,可以用各大小程序平台的官方开发者工具来做小程序.
2.不懂代码的小伙伴,可以利用无代码的【比文云开发者工具】来制作小程序。
下面给大家讲讲如何利用无代码小程序制作工具来制作小程序:
1.在小程序制作平台注册账号
用电脑浏览器搜索比文云官网注册一个账号
这个账号是用于保存小程序制作进度的,也是统一管理小程序内容以及了解小程序数据的平台,所以账号要保存好哦。
2.套用小程序模板
接下来就是套用小程序模板的环节了,套用模板很简单,大家可以根据小程序模板行业分类,或直接在搜索栏搜索相关行业,即可找到对应的行业小程序模板。
选好后,直接套用即可应用到自己账号的小程序页面中。
3.完成小程序页面设计
进入到小程序开发页面。
- 页面左侧会提供各种功能模块,只需要用鼠标拖动到相对小程序上就可以完成功能添加
- 在页面右侧会提供功能和页面参数的设置,可以用键盘输入文字和数字,就能完成小程序设计。
4.在后台申请平台的小程序账号,并绑定。
二、如何制作微信小程序?
2017年微信小程序发布开始,我就开始接触和学习微信小程序,看着小程序不断的更新迭代,功能越来越丰富,在这过程中,开发过商城小程序、停车扫码计费小程序、工具打卡小程序、流量主小程序等等,现在也有自己盈利的产品,对于开发也有了一点点经验给大家。
小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
作为一个过来人,从自己这么多年的开发经验和实战过程中,总结出一份小程序学习路线,可以说全网最详细也不为过,学习路线字数超4万字,但远远还没不够,只能当作是一个基础版本,之后我会不断丰富填充内容和知识点。
学习路线,不仅包含教你如何从零入门学习开发小程序,而且也从自己的经验中说说小程序如何运营,此外,还会涉及如何用小程序赚钱,拆解市场上成功的小程序案例,以及小程序如何结合AI来赚钱等等,小程序只是一种工具,如何利用小程序来为我们创造价值才是关键。
微信小程序学习路线总体大纲:
一.什么是小程序
二.学习路线特点
三.学习小程序前需要的基础知识
四.开发小程序前准备
五.小程序入门基础知识
六.小程序进阶知识
七.小程序常用框架
八.小程序常用插件
九.小程序开源源码
十.小程序运营
十一.小程序赚钱案例
十二.小程序流量主
温馨提示:可以根据自己的需求找相对应的类目,学习都要循序渐进。
一、小程序学习路线
这份学习路线并不完美,还在持续更新,与时俱进,与时代同行。
1.1什么是小程序?
微信小程序无需下载、触手可及、用完即走、无需卸载
1.2微信小程序的发展前景?
微信小程序功能已经非常丰富,基本满足我们业务需求使用,不管是个体还是企业都会考虑用小程序来解决自身业务需求,此外个人用小程序开发赚钱的也很多,也诞生了很多用户量级小程序,收益也非常可观。求职和开展副业,甚至自由职业也是必不可少的技能。
二、小程序学习路线特点
一份全面的小程序知识点大梳理和汇总
2.1分阶段学习
使用符合对知识点的重要程度做了区分,按需学习
2.2知识点附有描述和资源链接
提供大量优质学习资源
三、前言 – 学编程需要的特质
3.1定目标
拼命执行
不半途而废
3.2学小程序前需要的知识基础
描述:前端知识(Javascript、html、css)是小程序开发的基础,不需要你有多熟练,起码有了解,建议把小程序经常用到的知识点学好,再入门小程序会容易很多。
注意:现在很多课程都是以某一个框架教学,很少用到原生,这对于刚入门的我们来说并不好,一是我们不知道原生组件和语法,不利用我们了解小程序底层逻辑。二是学习框架也是需要成本,增加了学习的负担,可能把框架学完了,你的兴趣也降低了很多。
3.3前端资源:
阿里云前端实战学习:https://edu.aliyun.com/roadmap/frontend
W3Cschool 编程入门实战:https://www.w3cschool.cn/codecamp/
pink老师前端入门教程:https://www.bilibili.com/video/BV14J4114768
3.3.1小程序经常用到的前端知识点:
HTML
描述:用于定义一个网页结构的基本技术。
资源:https://developer.mozilla.org/zh-CN/docs/Learn/HTML
CSS
描述:层叠样式表,用于设计风格和布局。
资源:
弹性盒子布局flex:https://www.shuzhiduo.com/A/RnJWoL1BJq/
Javascript
描述:具有函数优先的轻量级,解释型或即时编译型的编程语言。
资源:回调函数 : https://www.bilibili.com/read/cv11101111/
3.4小程序官方资料
小程序注册接入 https://developers.weixin.qq.com/miniprogram/introduction/
官方工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
官方文档<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/"> https://developers.weixin.qq.com/miniprogram/dev/framework/
运营规范 https://developers.weixin.qq.com/miniprogram/product/
开发社区<a href="https://developers.weixin.qq.com/community/develop/question"> https://developers.weixin.qq.com/community/develop/question
微信支付 https://pay.weixin.qq.com/wiki/doc/apiv3/wxpay/pages/index.shtml
客服消息<a href="https://developers.weixin.qq.com/miniprogram/introduction/custom.html"> https://developers.weixin.qq.com/miniprogram/introduction/custom.html
特殊行业所需资质资料 https://developers.weixin.qq.com/miniprogram/product/material/
we数据分析<a href="https://developers.weixin.qq.com/miniprogram/analysis/wedata/"> https://developers.weixin.qq.com/miniprogram/analysis/wedata/
3.5如何学习微信小程序
多看官方文档,多看几遍,遇到问题时再看
1.基础知识要过关,如:时间绑定、ajax请求、异步回调,搞清楚小程序外是怎么交换
2.通读一遍官方文档,看看都有哪些东西,都能干什么
3.多敲代码,看到例子、别人的demo下载下来运行,看原理和结构
4.多写多看、熟能手巧
四、开发前必读
1.开发前需要了解禁止类目和资质,看一下运营规范
2.微信小程序需要https请求,需要准备备案域名:由于备案需要一定时间,要事先准备
3.SSL证书准备
4.服务器
五、小程序学习阶段
5.1开发工具和教程资料
微信开发者工具(推荐) https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
HBuilder X https://www.dcloud.io/hbuilderx.html
小程序入门资源
小程序开发起步(官方视频教程)https://developers.weixin.qq.com/community/business/course/000264e20a0dd8e69669b609451c0d
小程序基础开发之架构、框架、组件(官方视频教程)https://developers.weixin.qq.com/community/business/course/000ca4b0990a9087193d27b905780d
微信开发者工具系列课程(官方视频教程)https://developers.weixin.qq.com/community/business/course/000884131701789a46acb81f85140d
5.2小程序环境搭建与开发工具介绍
5.2.1了解什么是微信小程序,下载必要的软件工具和基础准备
5.2.2注册小程序账号,获取appid与appscret
5.2.3安装微信开发者工具
5.2.4程序的开发体验
5.3基本目录结构与文件作用
开发者工具的使用
创建项目
了解小程序整体目录结构
项目设置
主体文件
页面文件
其他文件
配置文件详解
主配置文件app.json
页面配置文件
WXML模板
WXSS样式
逻辑层js文件
css样式
class选择器
页面样式文件wxss
尺寸单位
样式导入
5.4小程序常用基础组件
罗列的知识要点都是我们经常会用到,从实战中总结出来的。熟悉了这些知识点,开发小程序基本不成问题。
view组件
input组件
button组件
slider组件
form组件
radio组件
checkbox 组件
picker组件
swiper组件
image 组件
icon图标
switch组件
video组件
5.5小程序语法
函数
函数创建
带参合不带参函数的区别
变量
变量的使用和初始化
变量重新赋值
变量命名规范
全局变量和局部变量
5.6数据绑定和渲染
简单双向绑定
事件类型
事件绑定
事件对象
流程控制
条件语句 if 和 else
循环语句 for
条件渲染
列表渲染
5.7微信小程序的交互反馈
认识loading组件
用toast显示提示信息
显示loading提示信息
wx.canIUse 判断当前版本是否可用
wx.getWindowInfo() 获取窗口信息
wx.updateWeChatApp() 更新客户端版本
wx.swtitchTab()路由 跳转到 tabBar 页面
wx.redirectTo() 关闭当前页面,跳转到应用内的某个页面
wx.navigateTo() 保留当前页面,跳转到应用内的某个页面
wx.navigateToMiniProgram() 打开另一个小程序
wx.showShareMenu() 显示当前页面的转发按钮
wx.onCopyUrl() 复制
wx.showToast() 消息提示框
wx.startPullDownRefresh() 下拉刷新
wx.pageScrollTo() 滚动
wx.chooseImage()图片功能
wx.chooseMedia()视频功能
富文本
收货地址 wx.chooseAddress()
wx.setClipboardData()剪切板
拨打电话 wx.makePhoneCall()
扫码 wx.scanCode()
5.8缓存机制和异步交互
生成本地缓存数据
从本地缓存读取数据
获取本地缓存数据
保存多条历史记录
使用数组保存多条历史记录
清理本地缓存
5.9应用弹性盒子布局
传统布局的实现方式
弹性盒子布局
弹性盒子布局的优点
如何让元素大小适配不同宽度屏幕
六、小程序进阶
6.1资源
小程序基础能力介绍(官方视频教程)https://developers.weixin.qq.com/community/business/course/000a62c2a00cb03d0a8e5375c5b00d
小程序开发新能力解读(官方)https://developers.weixin.qq.com/community/business/course/0004ca93454498f68aac5faa25b80d
6.2常用知识要点
认识wx.request接口函数
wx.request() 发起 HTTPS 网络请求
wx.downloadFile() 下载文件资源到本地
wx.uploadFile() 将本地资源上传到服务器
wx.requestPayment() 发起微信支付
用户授权登录
6.3小程序高级
资源
小程序性能优化实践(官方视频教程)基于实际开发场景,由资深开发者分享小程序性能优化的各项能力及应用实践,提升小程序性能表现
https://developers.weixin.qq.com/community/business/course/000606628dc2e86dc0ddcbb115940d
要点
小程序原理及框架剖析 https://segmentfault.com/a/1190000038836580
浅析微信小程序的底层架构原理<a href="http://t.zoukankan.com/goloving-p-14663950.html"> http://t.zoukankan.com/goloving-p-14663950.html
【小程序】图解小程序平台架构及其特征与应用机制 https://blog.csdn.net/ImagineCode/article/details/125360895
微信小程序「官方示例代码」浅析【上】 微信小程序「官方示例代码」浅析【上】 - 知乎
微信小程序「官方示例代码」剖析【下】:运行机制 微信小程序「官方示例代码」剖析【下】:运行机制 - 知乎
「微信小程序」剖析(二):框架原理 | 在浏览器上运行的猜想 「微信小程序」剖析(二):框架原理 | 在浏览器上运行的猜想 - 知乎
为什么我们需要一个兼容「微信小程序」的Web框架? 为什么我们需要一个兼容「微信小程序」的Web框架? - 知乎
让你的「微信小程序」运行在Chrome浏览器上,让我们使用WebStorm 让你的「微信小程序」运行在Chrome浏览器上,让我们使用WebStorm - 知乎
「微信小程序」剖析(四):原生的实时DOM转Virtual DOM 「微信小程序」剖析(四):原生的实时DOM转Virtual DOM - 知乎
这【五篇】文章将带你深入了解「微信小程序」 这【五篇】文章将带你深入了解「微信小程序」 - 知乎
近两万字小程序攻略发布了 https://juejin.cn/post/6844903670589423623
【微信小程序】性能优化 https://juejin.cn/post/6844903638226173965
七、小程序常用框架
工具
基于Vue
uni-app ☆37.6k 使用 Vue 语法开发小程序、H5、App的统一框架 https://github.com/dcloudio/uni-app
mpvue ☆20.4k 基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系 https://github.com/Meituan-Dianping/mpvue
megalo ☆1.6k 基于 Vue 的小程序开发框架 https://github.com/kaola-fed/megalo
Okam 使用类 Vue 方式开发小程序的渐进增强框架,支持生成微信/百度等主流平台的小程序 https://github.com/ecomfe/okam
rubic – 基于 Vue3 的小程序开发框架,在小程序中使用 Composition API https://github.com/jaskang/rubic
基于React
Taro ☆32.2k 使用 React 的方式开发小程序的框架,同时支持生成多端应用 https://github.com/NervJS/taro
Remax ☆4.5k 使用真正的 React 构建小程序<a href="https://github.com/remaxjs/remax"> https://github.com/remaxjs/remax
基于Gulp
WeApp-Workflow ☆100+ – 基于 Gulp 的微信小程序前端开发工作流 https://github.com/Jeff2Ma/WeApp-Workflow
gulp-wxapp-boilerplate – 小程序+小程序云 Gulp 开发脚手架,支持云函数 mock https://github.com/ksky521/gulp-wxapp-boilerplate
weapp-gulp – Gulp高效构建微信小程序,让开发变得更简单 https://github.com/sunnie1992/weapp-gulp
基于node
wcc.js – wcc.js 是wxml文件和wxs文件编译器的nodejs实现 https://github.com/caijw/wcc.js
wcsc.js – wcsc.js 是wxss文件编译器的nodejs实现 https://github.com/caijw/wcsc.js
其它
WePY ☆22k 支持组件化的小程序开发框架 https://github.com/Tencent/wepy
chameleon ☆9k 一套代码运行多端,一端所见即多端所见<a href="https://github.com/didi/chameleon"> https://github.com/didi/chameleon
kbone Web ☆4.5k 与小程序同构解决方案 https://github.com/Tencent/kbone
wept ☆2.8k 微信小程序实时运行环境 https://github.com/wetools/wept
wechat_web_devtools ☆2.7k Linux 下微信开发者工具 https://github.com/cytle/wechat_web_devtools
wafer ☆2.2k 快速构建具备弹性能力的微信小程序 https://github.com/tencentyun/wafer
MPX ☆3.2k 增强型小程序框架,深度性能优化,支持跨小程序平台开发,完全兼容原生小程序组件 https://github.com/didi/mpx
Labrador ☆1.7k 支持 ES6/7 的微信小程序组件化开发框架 https://github.com/maichong/labrador
licia ☆2.1k 支持小程序的 JS 工具库 https://github.com/liriliri/licia
CloudBase Framework ☆1.9k腾讯云开发开源一键部署工具,支持部署小程序及云开发应用 https://github.com/Tencent/cloudbase-framework
tina ☆1.3k 轻巧的渐进式微信小程序框架 https://github.com/tinajs/tina
minapp ☆927 – TypeScript 版小程序开发框架(兼容原生小程序代码) https://github.com/qiu8310/minapp
xpmjs ☆100+ – 微信小程序云端增强 SDK https://github.com/xpmjs/xpmjs
weapp-tailwindcss-webpack-plugin ☆100+ 在小程序里使用 TailwindCSS 吧 https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin
weact 用 JSX 快速开发小程序 https://github.com/haojy/weact
socket.io-mp-client 微信小程序 http://socket.io 客户端 https://github.com/cytle/socket.io-mp-client
@wxa AOP小程序开发框架 https://wxajs.github.io/wxa/
wxml-parser – JavaScript WXML parser https://github.com/seanlong/wxml-parser
weappx – 基于 redux 的数据层管理框架 https://github.com/tolerance-go/weappx
weapp-start – 基于插件机制的开发脚手架,改善原生小程序开发体验 https://github.com/tolerance-go/weapp-start
Egret Wing – 支持微信小程序实时预览的 IDE http://developer.egret.com/cn/github/egret-docs/Wing/update/update320/index.html
wxapp-graphql – 小程序 GraphQL 客户端 https://github.com/Authing/wxapp-graphql
wenaox – 小程序数据层管理 ,轻量性能好,支持中间件<a href="https://github.com/cnyballk/wenaox"> https://github.com/cnyballk/wenaox
cheers-mp – Almost零配置微信原生小程序脚手架,vue-cli般的体验~(ts、less、原生npm、云OSS、CI自动发布体验版) https://github.com/bigmeow/cheers-mp
we-mobx – 在微信小程序中使用 MobX https://github.com/cicec/we-mobx
weconsole – 功能全面、界面与体验对标 Chrome devtools 的可定制化的小程序开发调试面板 https://github.com/weimobGroup/WeConsole
px 转 rpx 插件
postcss-pxtorpx-pro – postcss px 转 rpx 插件 https://github.com/Genuifx/postcss-pxtorpx-pro
px2rpx – Px 转 Rpx 在线工具 https://github.com/allanguys/px2rpx
八、小程序常用插件
wxapp.vim – 提供微信小程序开发全方位支持的 vim 插件 https://github.com/chemzqm/wxapp.vim
Matchmaker – IntelliJ IDEA 插件,注入方法 https://github.com/lypeer/Matchmaker
wechatCode-complete – webstorm 插件(代码提示) https://github.com/qbright/wechatCode-complete
wxapp – sublime plugin https://github.com/FloydaGithub/wxapp
minapp – vscode 插件(支持 原生/mpvue/wepy 框架) https://github.com/qiu8310/minapp/blob/master/packages/minapp-vscode/README.md
vscode-live-sass-compiler – vscode插件根据.scss文件自动生成wxss文件 https://github.com/ritwickdey/vscode-live-sass-compiler
WePY Plugin For IntelliJ Platform – 让PhpStorm/WebStorm全面支持WePY的开发,包括API(原生/WePY)和组件(官方/自定义)的自动完成/错误检查/高亮/不依赖Vue/… http://wepy.iniself.com/
wxml – vscode插件–微信小程序格式化以及高亮组件(高度自定义) https://github.com/cnyballk/wxml-vscode
wux-weapp-snippets – Wux Weapp Snippets for VS Code. https://github.com/wux-weapp/wux-weapp-snippets
wux-weapp-atom-snippets – Wux Weapp Snippets for Atom. https://github.com/wux-weapp/wux-weapp-atom-snippets
wux-weapp-sublime-snippets – Wux Weapp Snippets Plugin for Sublime Text 2/3. https://github.com/wux-weapp/wux-weapp-sublime-snippets
组件
UI组件库
weui-wxss ☆12.4K+ – 同微信原生视觉体验一致的基础样式库 https://github.com/Tencent/weui-wxss
vant-weapp ☆12.3k+ – 高颜值、好用、易扩展的微信小程序 UI 库 https://github.com/youzan/vant-weapp
iview-weapp ☆5.5k+ – 一套高质量的微信小程序 UI 组件库 https://github.com/TalkingData/iview-weapp
wux-weapp ☆4.2k+ – 一套组件化、可复用、易扩展的微信小程序 UI 组件库<a href="https://github.com/wux-weapp/wux-weapp"> https://github.com/wux-weapp/wux-weapp
Lin UI ☆2k+ – 一套设计优良、基于原生微信小程序语法的 UI 组件库<a href="https://github.com/TaleLin/lin-ui"> https://github.com/TaleLin/lin-ui
Wa-UI ☆200+ – 针对微信小程序整合的一套 UI 库<a href="https://github.com/liujians/Wa-UI"> https://github.com/liujians/Wa-UI
wuss-weapp – 一款高质量,组件齐全,高自定义的微信小程序UI组件库 https://github.com/phonycode/wuss-weapp
日历
wx_calendar ☆300+ – 小程序日历 https://github.com/treadpit/wx_calendar
miniprogram-datepicker – 小程序日期选择器(支持农历) https://github.com/pithyone/miniprogram-datepicker
mpvue-calendar – 微信小程序/浏览器端的日历组件mpvue-calendar;基于mpvue平台 支持农历、按周切换、可自定义。 https://github.com/Hzy0913/mpvue-calendar
富文本
wxParse ☆7.2K+ – 微信小程序富文本解析自定义组件,支持 HTML 及 markdown 解析 https://github.com/icindy/wxParse
mp-html ☆1.4K+ – 小程序富文本组件,支持渲染和编辑 html,支持在微信、QQ、百度、支付宝、头条和 uni-app 平台使用<a href="https://github.com/jin-yufeng/mp-html"> https://github.com/jin-yufeng/mp-html
滑动
wx-scrollable-tab-view ☆200+ – 小程序可滑动得 tab-view https://github.com/zhongjie-chen/wx-scrollable-tab-view
wx-alphabetical-listview ☆100+ – 微信小程序带字母滑动的 listview https://github.com/zhongjie-chen/wx-alphabetical-listview
wx-drawer ☆100+ – 小程序模仿 QQ6.0 侧滑菜单 https://github.com/zhongjie-chen/wx-drawer
we-swiper ☆100+ – 微信小程序触摸内容滑动解决方案 we-swiper ☆100+ – 微信小程序触摸内容滑动解决方案
图表
wx-charts ☆4.1k+ – 微信小程序图表 charts 组件 https://github.com/xiaolin3303/wx-charts
wxapp-charts ☆100+ – 微信小程序图表 charts 组件 https://github.com/hawx1993/wxapp-charts
chartjs-wechat-mini-app ☆100+ – chartjs 微信小程序适配 https://github.com/xiabingwu/chartjs-wechat-mini-app
wepy-com-charts – 微信小程序 wepy 图表控件<a href="https://github.com/CalvinHong/wepy-com-charts"> https://github.com/CalvinHong/wepy-com-charts
anka-tracker – 小程序打点库,用于统计用户行为数据<a href="https://github.com/iException/anka-tracker"> https://github.com/iException/anka-tracker
图片
image-cropper ☆900+ –
微信小程序图片裁剪组件 https://github.com/1977474741/image-cropper
wxapp-img-loader ☆400+ – 微信小程序图片预加载组件<a href="https://github.com/o2team/wxapp-img-loader"> https://github.com/o2team/wxapp-img-loader
we-cropper ☆400+ – 微信小程序图片裁剪工具 https://github.com/we-plugin/we-cropper
xing-weapp-editor – 小程序图文编辑组件<a href="https://github.com/ianho/xing-weapp-editor"> https://github.com/ianho/xing-weapp-editor
图片自适应 ,富文本解析<a href="https://github.com/Data-Camp/WeApp_Demos/tree/master/%E5%9B%BE%E7%89%87%E8%87%AA%E9%80%82%E5%BA%94%20%EF%BC%8C%E5%AF%8C%E6%96%87%E6%9C%AC%E8%A7%A3%E6%9E%90/wxapp-master"> https://github.com/Data-Camp/WeApp_Demos/tree/master/%E5%9B%BE%E7%89%87%E8%87%AA%E9%80%82%E5%BA%94%20%EF%BC%8C%E5%AF%8C%E6%96%87%E6%9C%AC%E8%A7%A3%E6%9E%90/wxapp-master
Canvas
wxa-plugin-canvas ☆300+ – 微信小程序朋友圈海报生成组件 https://github.com/jasondu/wxa-plugin-canvas
WeZRender ☆300+ – 微信小程序 Canvas 开发<a href="https://github.com/guyoung/WeZRender"> https://github.com/guyoung/WeZRender
mp_canvas_drawer – canvas绘制图片助手,一个json就制作分享朋友圈图片 https://github.com/kuckboy1994/mp_canvas_drawer
anka-brush – 一款为简化小程序里canvas画图操作而创建的工具库 https://github.com/iException/anka-brush
组件功能
WeiXinProject – 微信小程序列表上拉刷新和上拉加载 https://github.com/lidong1665/WeiXinProject
wxapp ☆300+ – 微信小程序功能组件 https://github.com/youzouzou/wxapp
wetoast ☆100+ – 微信小程序 toast 增强插件 https://github.com/kiinlam/wetoast
wxSearch ☆200+ – 微信小程序优雅的搜索框 https://github.com/icindy/wxSearch
citySelect ☆100+ – 微信小程序城市选择器 https://github.com/chenjinxinlove/citySelect
xing-weapp-component – 微信小程序基础组件扩展<a href="https://github.com/ianho/xing-weapp-component"> https://github.com/ianho/xing-weapp-component
wx-statuslayout – 小程序页面状态切换组件 https://github.com/ZzjBeatYou/wx-statuslayout
minapp-slider-left – 微信小程序左划删除组件 https://github.com/bigmeow/minapp-slider-left
mp-swipe-card – 小程序卡片滑动组件,类似探探的效果,貌似现在只支持左右滑动 https://github.com/qizf7/mp-swipe-card
we-validator – 简单灵活的表单验证插件,支持小程序、浏览器以及Nodejs端使用。https://github.com/ChanceYu/we-validator
wx-pulltorefresh-view – 简单灵活的下拉上拉刷新组件,支持微信小程序 https://github.com/zhongxuqi/wx-pulltorefresh-view
weapp-input-frame – 微信小程序验证码输入框组件 https://github.com/xjh22222228/weapp-input-frame
小程序读取excel数据 https://github.com/qiushi123/xiaochengxu_demos/tree/master/190729%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%A1%A8%E6%A0%BC
2D/3D
wxDraw ☆100+ – 微信小程序 2D 动画库 https://github.com/bobiscool/wxDraw
API、Promise
weapp-polyfill – [w3c 标准 API polyfill https://github.com/leancloud/weapp-polyfill
wx-promise-pro ☆666+ – 微信小程序 Promise 库<a href="https://github.com/youngjuning/wx-promise-pro"> https://github.com/youngjuning/wx-promise-pro
minapp-api-promise – 微信小程序所有 API promise 化<a href="https://github.com/bigmeow/minapp-api-promise"> https://github.com/bigmeow/minapp-api-promise
wx-api-promisify – 优雅地将微信小程序API Promise化 https://github.com/vv13/wx-api-promisify
weapp.request – 为微信小程序提供的网络请求组件,是 wx.request 的扩展,基于 Promise API,添加缓存控制。<a href="https://github.com/afishhhhh/weapp.request"> https://github.com/afishhhhh/weapp.request
miniprogram-network – Redefine the Network API of MiniProgram(小程序网络请求库) https://github.com/NewFuture/miniprogram-network
其它
wemark ☆1.100+ – 微信小程序 Markdown 渲染库 https://github.com/TooBug/wemark
wx-promise-request ☆100+ – 微信小程序请求队列管理库 https://github.com/JoeZheng2015/wx-promise-request
weapp-cookie ☆100+ – 一行代码让微信小程序支持 cookie
https://github.com/charleslo1/weapp-cookie
wxapp-lock – 微信小程序手势解锁 https://github.com/demi520/wxapp-lock
http://weapp.socket.io ☆500+ – http://socket.io 风格的 websocket 类库<a href="https://github.com/weapp-socketio/weapp.shttp://ocket.io"> https://github.com/weapp-socketio/weapp.socket.io
wxMD5 – 微信小程序 MD5 库 https://github.com/youngjuning/wxMD5
wxBase64 – 微信小程序base64 库<a href="https://github.com/youngjuning/wxBase64"> https://github.com/youngjuning/wxBase64
cue – A WX Compontent Tools https://github.com/WARJY/cue
sol-weapp ☆300+ -微信小程序营销组件:红包雨、大转盘等营销组件 https://github.com/sunniejs/sol-weapp/
we-debug – 一款灵活、易于拓展的微信小程序调试工具 https://github.com/dlhandsome/we-debug
weapp-qrcode – 微信小程序生成二维码工具 https://github.com/tomfriwel/weapp-qrcode
cheers-mp-router –
精巧强大的小程序原生路由 https://github.com/bigmeow/cheers-mp-router
wx-updata – 微信小程序官方 setData 替代品,只修改 data 中你希望修改的部分
https://github.com/SHERlocked93/wx-updata
three-platformize – 一个让 THREE 平台化的项目,已适配微信、淘宝、头条小程序 https://github.com/deepkolos/three-platformize
九、小程序开源源码(按类目分)
可直接运行成功
物流
教育
在线答题小程序 https://gitee.com/xiaofeiyang3369/myexamapp?_from=gitee_search
答题小程序 https://gitee.com/kesixin/QuestionWechatApp?_from=gitee_search
答题考试小程序 https://gitee.com/wulivicor/exam?_from=gitee_search
在线考试小程序 https://gitee.com/dabenbenyihao/online-test-applet?_from=gitee_search
答题小程序<a href="https://gitee.com/423555593/datixiaochengxu?_from=gitee_search#%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E"> https://gitee.com/423555593/datixiaochengxu?_from=gitee_search#%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E
交通
停车场系统小程序 https://gitee.com/wangdefu/parking_system_applet?_from=gitee_search
房地产
租房小程序 https://gitee.com/open-source-byte/house?_from=gitee_search
租房微信小程序-带管理员后台<a href="https://gitee.com/LiangSenCheng/house?_from=gitee_search"> https://gitee.com/LiangSenCheng/house?_from=gitee_search
宿舍报修助手<a href="https://gitee.com/aYuan-git/wechat-dorm-miniprogram?_from=gitee_search"> https://gitee.com/aYuan-git/wechat-dorm-miniprogram?_from=gitee_search
生活
校园综合服务平台小程序 https://gitee.com/yaozy717/hbhzdtn?_from=gitee_search
微信报修小程序 https://gitee.com/cxyax/WeChatComputer-roomMaintenance?_from=gitee_search
垃圾分类小程序 https://gitee.com/joelingwei/rubbish?_from=gitee_search
CC智慧物业小程序 https://gitee.com/voice-of-xiaozhuang/SmartPrroperty?_from=gitee_search
市民政务服务预约小程序<a href="https://gitee.com/ht-jenny/CityAppt?_from=gitee_search"> https://gitee.com/ht-jenny/CityAppt?_from=gitee_search
HC智慧家园小程序<a href="https://gitee.com/java110/WechatOwnerService?_from=gitee_search"> https://gitee.com/java110/WechatOwnerService?_from=gitee_search
口腔医院预约平台小程序 https://gitee.com/zmn_repository/wx_dental_hospital?_from=gitee_search
家政服务小程序 https://gitee.com/chun-hui-gao2022/familymini?_from=gitee_search
物资预约领取小程序 https://gitee.com/crystar/tcb-hackthon-mask?_from=gitee_search
美容机构预约小程序<a href="https://gitee.com/naive2021/smartbeauty?_from=gitee_search"> https://gitee.com/naive2021/smartbeauty?_from=gitee_search
IT科技
餐饮
餐厅订座小程序 https://gitee.com/wind-pheasant-zere/GoodFoodAppt?_from=gitee_search
文娱
婚姻登记中心小程序<a href="https://gitee.com/wang-xiaocao/SunMarry?_from=gitee_search"> https://gitee.com/wang-xiaocao/SunMarry?_from=gitee_search
旅游景区门户小程序<a href="https://gitee.com/voice-of-xiaozhuang/WeTravel?_from=gitee_search"> https://gitee.com/voice-of-xiaozhuang/WeTravel?_from=gitee_search
口袋吉他 https://gitee.com/alex1504/wx-guita_tab-public?_from=gitee_search
工具
wyq2214368/remove-water-mark-mp –
短视频去水印小程序(含服务端)https://github.com/wyq2214368/remove-water-mark-mp
xtanyu/parsing-mini – 短视频去水印小程序(含Java版本服务端) https://github.com/xtanyu/parsing-mini
realyao/Focus-clock ★100+ –
时间管理小程序:专注时钟(集成时间管理、目标计划、Todo待办、白噪声。易部署 适合新手学习入门)https://github.com/realyao/WXminiprogram-Focus-clock
小程序爱乐查 https://gitee.com/dave_hai/XiaoChengXuAiLeCha?_from=gitee_search
贴身管家小程序版 https://gitee.com/nmgwap/TieShenGuanJia-WeiXinXiaoChengXuBan?_from=gitee_search
婚礼请柬小程序 https://gitee.com/zijun2030/hun-jian?_from=gitee_search
驾校预约小程序<a href="https://gitee.com/cai-jianya111/drivermini?_from=gitee_search"> https://gitee.com/cai-jianya111/drivermini?_from=gitee_search
活动报名小程序 https://gitee.com/minzonetech/CCSmartMeet?_from=gitee_search
花栗鼠关爱小姨妈(小程序)<a href="https://gitee.com/hualishu910/Period_Diary?_from=gitee_search"> https://gitee.com/hualishu910/Period_Diary?_from=gitee_search
电商
基于vue、element ui 的轻量级、前后端分离、拥有完整sku和下单流程的完全开源商城 小程序端 https://gitee.com/gz-yami/mall4m?_from=gitee_search
社交
imageslr/taro-library ★150+ – Taro + Redux + 本地 Mock Server 小程序示例项目 https://github.com/imageslr/taro-library
校友会小程序 https://gitee.com/minzonetech/CCSmartTXL?_from=gitee_search
体育
运动场馆预约小程序 https://gitee.com/voice-of-xiaozhuang/sportmini?_from=gitee_search
健身预约小程序<a href="https://gitee.com/yupsh/fitness-reservation?_from=gitee_search"> https://gitee.com/yupsh/fitness-reservation?_from=gitee_search
汽车
资讯
RebeccaHanjw/weapp-wechat-zhihu ★800+ – 仿知乎<a href="https://github.com/RebeccaHanjw/weapp-wechat-zhihu"> https://github.com/RebeccaHanjw/weapp-wechat-zhihu
imageslr/weapp-library ★500+ – 在线借书平台(30+页面/组件化/Mock Server/云开发) https://github.com/imageslr/weapp-library
微慕WordpPress小程序开源版 前端<a href="https://github.com/iamxjb/winxin-app-watch-http://life.net"> https://github.com/iamxjb/winxin-app-watch-life.net
大白鲸旅游攻略-小程序 https://gitee.com/ckjcode/big-white-whale-travel-guide?_from=gitee_search
追格资讯小程序开源版 https://gitee.com/zhuige_com/jiangqie_kafei?_from=gitee_search
豆瓣类影视查询记录小程序 https://gitee.com/x1299906945/Mark?_from=gitee_search
高仿Readhub小程序 https://gitee.com/richard1015/News?_from=gitee_search
其它
deepkolos/three-platformize-demo-wechat – 微信小程序 THREE 包含16个loader测试demo https://github.com/deepkolos/three-platformize-demo-wechat
deepkolos/wxmp-tensorflow – 微信小程序下运行最新TensorFlowJS的解决方案 https://github.com/deepkolos/wxmp-tensorflow
只有前端,后端源码不完整
物流
教育
We重邮<a href="https://github.com/Data-Camp/WeApp_Demos/tree/master/%E9%87%8D%E9%82%AE/wecqupt-master"> https://github.com/Data-Camp/WeApp_Demos/tree/master/%E9%87%8D%E9%82%AE/wecqupt-master
交通
ofo小程序 https://github.com/MiceLiD/ofo-applet
卡卡汽车 获取用户 设备信息<a href="https://github.com/Data-Camp/WeApp_Demos/tree/master/%E5%8D%A1%E5%8D%A1%E6%B1%BD%E8%BD%A6%20%E8%8E%B7%E5%8F%96%E7%94%A8%E6%88%B7%20%E8%AE%BE%E5%A4%87%E4%BF%A1%E6%81%AF/wx_Applet-master"> https://github.com/Data-Camp/WeApp_Demos/tree/master/%E5%8D%A1%E5%8D%A1%E6%B1%BD%E8%BD%A6%20%E8%8E%B7%E5%8F%96%E7%94%A8%E6%88%B7%20%E8%AE%BE%E5%A4%87%E4%BF%A1%E6%81%AF/wx_Applet-master
房地产
生活
垃圾分类小程序 https://github.com/qi19901212/Garbage
跑步小程序<a href="https://github.com/alanwangmodify/weChatApp-Run"> https://github.com/alanwangmodify/weChatApp-Run
IT科技
餐饮
餐饮点餐商城<a href="https://github.com/woniudiancang/bee"> https://github.com/woniudiancang/bee
餐饮点餐商城 https://github.com/woniudiancang/bee
文娱
weapp-film – 淘票票 https://github.com/luuman/weapp-film
lsqy/taro-music –
基于taro + taro-ui + redux + typescript 开发的网易云音乐小程序 https://github.com/lsqy/taro-music
仿喜马拉雅lite – 微信小程序原生开发的仿喜马拉雅小程序(极度适合新手入门) https://github.com/Notobey/Himalayan-lite
工具
wangmingjob/weapp-weipiao ★300+ – 微票 https://github.com/wangmingjob/weapp-weipiao
harveyqing/BearDiary ★200+ – 小熊の日记<a href="https://github.com/harveyqing/BearDiary"> https://github.com/harveyqing/BearDiary
leancloud/leantodo-weapp ★200+ – 集成 LeanCloud 实现的 Todo list https://github.com/leancloud/leantodo-weapp
kraaas/timer ★100+ – 番茄时钟<a href="https://github.com/kraaas/timer"> https://github.com/kraaas/timer
dunizb/wxapp-sCalc ★100+ – 简易计算器<a href="https://github.com/dunizb/wxapp-sCalc"> https://github.com/dunizb/wxapp-sCalc
litt1e-p/weapp-girls ★100+ – 豆瓣美女/妹子图<a href="https://github.com/litt1e-p/weapp-girls"> https://github.com/litt1e-p/weapp-girls
liumulin614/BeautifulGirl – 美女模特 https://github.com/liumulin614/BeautifulGirl
vace/wechatapp-news-reader ★100+ – 新闻阅读器 https://github.com/vace/wechatapp-news-reader
DengKe1994/weapp-calculator – IOS 计算器<a href="https://github.com/DengKe1994/weapp-calculator"> https://github.com/DengKe1994/weapp-calculator
monkindey/wx-github – GitHub 简历<a href="https://github.com/monkindey/wx-github"> https://github.com/monkindey/wx-github
fluency03/weapp-500px – 国外摄影社区 500px<a href="https://github.com/fluency03/weapp-500px"> https://github.com/fluency03/weapp-500px
xujinyang/CoderCalendar-WeApp – 程序员老黄历<a href="https://github.com/xujinyang/CoderCalendar-WeApp"> https://github.com/xujinyang/CoderCalendar-WeApp
brucevanfdm/WeChatMeiZhi – 妹子图 https://github.com/brucevanfdm/WeChatMeiZhi
zce/weapp-todos – TODOS 任务清单 https://github.com/zce/weapp-todos
arkilis/weapp-jandan – 煎蛋 https://github.com/arkilis/weapp-jandan
bodekjan/wechat-weather – 微信天气 https://github.com/bodekjan/wechat-weather
jasscia/ChristmasHat – 我要圣诞帽 https://github.com/jasscia/ChristmasHat
nanwangjkl/sliding_puzzle – 滑块拼图 https://github.com/nanwangjkl/sliding_puzzle
w1109790800/We-Todo – 基于LeanCloud的Todo-List<a href="https://github.com/w1109790800/We-Todo"> https://github.com/w1109790800/We-Todo
lonnng/etym – 芒果词源助手 https://github.com/lonnng/etym
wuhou123/wxxcx – 武侯的猫,基于wepy构建,整合了n多查询工具(快递,天气,记账,搞笑视频等)<a href="https://github.com/wuhou123/wxxcx"> https://github.com/wuhou123/wxxcx
upupming/HITMers – 博物馆小助手(统计值班表、签到、值班日历及备忘录、国际化、http://Streamable.com 视频上传等)https://github.com/upupming/HITMers
WarpPrism/SubwayRoutineMP – 【东京首尔曼谷新加坡巴黎地铁线路图
】https://github.com/WarpPrism/SubwayRoutineMP
GoKu-gaga/today – 口袋工具(一个小工具的集合)https://github.com/GoKu-gaga/today
cy920820/weapp-motor-movies – 马达电影助手(一个院线电影小助手) https://github.com/cy920820/weapp-motor-movies
Gwokhov/chronus – Chronus 目标日记(一款能帮助你管理生活目标的云开发微信小程序)https://github.com/Gwokhov/chronus
imliubo/Wechat_MQTT_ESP8266_BaiduIoT – 微信智能小管家 (使用微信小程序控制你的硬件设备) https://github.com/imliubo/Wechat_MQTT_ESP8266_BaiduIoT
ZhuPeng/mp-githubtrending – 以 Feed 流形式查看 GitHub Trending 仓库集合的工具 https://github.com/ZhuPeng/mp-githubtrending
yociduo/scrum-planning-poker – Scrum敏捷估算,基于wepy构建 https://github.com/yociduo/scrum-planning-poker
branliang/game-stop-app – PSN降价了(一个可以订阅PS4游戏价格的工具)https://github.com/BranLiang/game-stop-app
wk989898/wxchat-mail – 仿Gmail邮箱的微信小程序 https://github.com/wk989898/wxchat-mail
arleyGuoLei/wechat-1password –
有本密码,云开发实现的AES加密密码本,支持指纹、人脸,UI简约大方<a href="https://github.com/arleyGuoLei/wechat-1password"> https://github.com/arleyGuoLei/wechat-1password
wilhantian/periodic-table –
精致的元素周期表小程序<a href="https://github.com/wilhantian/periodic-table"> https://github.com/wilhantian/periodic-table
terryso/super9 –
抖音一键去水印小程序: Taro + 微信云开发 https://github.com/terryso/super9
redhat123456/upPhysicalExercise –
up体能训练小程序(健身训练、观看视频、制定计划于一身的综合小程序) https://github.com/redhat123456/upPhysicalExercise
redhat123456/Tanger_query –
查询小程序(查询各种各样的信息的小程序) https://github.com/redhat123456/Tanger_query
mark420524/question – 学习答题小程序,诗词歌赋小工具-早晚答小程序 https://github.com/mark420524/question
云笔记<a href="https://github.com/Data-Camp/WeApp_Demos/tree/master/%E4%BA%91%E7%AC%94%E8%AE%B0/hotapp-notepad-master"> https://github.com/Data-Camp/WeApp_Demos/tree/master/%E4%BA%91%E7%AC%94%E8%AE%B0/hotapp-notepad-master
备忘录开发 https://github.com/Data-Camp/WeApp_Demos/tree/master/%E5%A4%87%E5%BF%98%E5%BD%95/todolist-master
大转盘 https://github.com/Data-Camp/WeApp_Demos/tree/master/%E5%A4%A7%E8%BD%AC%E7%9B%98/tianmao
涂鸦 https://github.com/Data-Camp/WeApp_Demos/tree/master/%E6%B6%82%E9%B8%A6/graffiti
语音跟读<a href="https://github.com/Data-Camp/WeApp_Demos/tree/master/%E8%AF%AD%E9%9F%B3%E8%B7%9F%E8%AF%BB/wxreading-master"> https://github.com/Data-Camp/WeApp_Demos/tree/master/%E8%AF%AD%E9%9F%B3%E8%B7%9F%E8%AF%BB/wxreading-master
身份证查询<a href="https://github.com/Data-Camp/WeApp_Demos/tree/master/%E8%BA%AB%E4%BB%BD%E8%AF%81%E6%9F%A5%E8%AF%A2/wechat_gadget"> https://github.com/Data-Camp/WeApp_Demos/tree/master/%E8%BA%AB%E4%BB%BD%E8%AF%81%E6%9F%A5%E8%AF%A2/wechat_gadget
首字母排序选择<a href="https://github.com/Data-Camp/WeApp_Demos/tree/master/%E9%A6%96%E5%AD%97%E6%AF%8D%E6%8E%92%E5%BA%8F%E9%80%89%E6%8B%A9/wxSortPickerView-master"> https://github.com/Data-Camp/WeApp_Demos/tree/master/%E9%A6%96%E5%AD%97%E6%AF%8D%E6%8E%92%E5%BA%8F%E9%80%89%E6%8B%A9/wxSortPickerView-master
麻将骰子:附详细教程<a href="https://github.com/Data-Camp/WeApp_Demos/tree/master/%E9%BA%BB%E5%B0%86%E9%AA%B0%E5%AD%90%EF%BC%9A%E9%99%84%E8%AF%A6%E7%BB%86%E6%95%99%E7%A8%8B/WeChat-app-dice"> https://github.com/Data-Camp/WeApp_Demos/tree/master/%E9%BA%BB%E5%B0%86%E9%AA%B0%E5%AD%90%EF%BC%9A%E9%99%84%E8%AF%A6%E7%BB%86%E6%95%99%E7%A8%8B/WeChat-app-dice
答题小程序<a href="https://github.com/kesixin/QuestionWechatApp"> https://github.com/kesixin/QuestionWechatApp
婚礼邀请函 https://github.com/pengMaster/marry
婚礼喜帖小程序<a href="https://github.com/chenyongze/OnceLove"> https://github.com/chenyongze/OnceLove
电商
EastWorld/wechat-app-mall ★3000+ – 微信小程序商城<a href="https://github.com/EastWorld/wechat-app-mall"> https://github.com/EastWorld/wechat-app-mall
tumobi/nideshop-mini-program ★2000+ – 基于 Node.js + MySQL 开发的开源微信小程序商城 https://github.com/tumobi/nideshop-mini-program
bayetech/wechat_mall_applet ★300+ – 电商平台 https://github.com/bayetech/wechat_mall_applet
steedos/mini-vip – 华炎微站、微商城<a href="https://github.com/steedos/mini-vip"> https://github.com/steedos/mini-vip
社交
18380435477/WeApp ★300+ – 仿微信<a href="https://github.com/18380435477/WeApp"> https://github.com/18380435477/WeApp
ericzyh/wechat-chat ★100+ – 聊天室 https://github.com/ericzyh/wechat-chat
YYJeffrey/july_client ★100+ – 七月(一款社交小程序,集内容发布、动态分享、点赞评论、互动聊天等功能) https://github.com/YYJeffrey/july_client
RAOE/show-videos – 秀视频(微信小程序短视频社交软件,视频上传,音视频合成,评论,点赞,转发,分享等) https://github.com/RAOE/show-videos
wechat-im 即时通讯 https://github.com/unmagic/wechat-im
体育
汽车
资讯
jectychen/wechat-v2ex ★300+) – V2EX https://github.com/jectychen/wechat-v2ex
myronliu347/wechat-app-zhihudaily ★200+ – 知乎日报<a href="https://github.com/myronliu347/wechat-app-zhihudaily"> https://github.com/myronliu347/wechat-app-zhihudaily
ahonn/weapp-one ★200+ – 仿 ONE https://github.com/ahonn/weapp-one
yaoshanliang/weapp-ssha ★200+ – 企业宣传小程序 https://github.com/yaoshanliang/weapp-ssha
hilongjw/weapp-gold ★100+ – 掘金主页信息流<a href="https://github.com/hilongjw/weapp-gold"> https://github.com/hilongjw/weapp-gold
zce/weapp-douban ★100+ – 豆瓣电影 https://github.com/zce/weapp-douban
hingsir/weapp-douban-film ★100+ – 豆瓣电影 https://github.com/hingsir/weapp-douban-film
BelinChung/wxapp-hiapp ★100+ – HiApp https://github.com/BelinChung/wxapp-hiapp
romoo/weapp-demo-breadtrip ★100+ – 面包旅行 https://github.com/romoo/weapp-demo-breadtrip
githinkcn/Giteer – Giteer For 码云,基于Taro + Taro UI + Dva的小程序。 https://github.com/githinkcn/Giteer
bruintong/wechat-webapp-douban-movie – 豆瓣电影 https://github.com/bruintong/wechat-webapp-douban-movie
bruintong/wechat-webapp-douban-location – 豆瓣同城 https://github.com/bruintong/wechat-webapp-douban-location
mohuishou/scuplus-wechat – We 川大 https://github.com/mohuishou/scuplus-wechat
hankzhuo/wx-v2ex – v2ex<a href="https://github.com/hankzhuo/wx-v2ex"> https://github.com/hankzhuo/wx-v2ex
Hongye567/weapp-mark – 仿 Mark 影单的微信小程序 https://github.com/Hongye567/weapp-mark
jae-jae/weapp-github-trending – Github今日榜单 https://github.com/jae-jae/weapp-github-trending
alex1504/wx-guita_tab – 口袋吉他 https://github.com/alex1504/wx-guita_tab
Airmole/ShellBox – 贝壳小盒子(校园教务信息查询类工具,获2019高校小程序开发大赛华北区二等奖)https://github.com/Airmole/ShellBox
aquanlerou/WeHalo ★200+ – 爱敲代码的猫(WeHalo 简约风 的微信小程序版博客
) https://github.com/aquanlerou/WeHalo
yuzexia/iw3cplus – 前端社区http://www.w3cplus.com的微信小程序 https://github.com/yuzexia/iw3cplus
kilakila-heart/fuliba-front – 信息流福利吧小程序 https://github.com/kilakila-heart/fuliba-front
AnsonZnl/bookshelf –
基于云开发的书架小程序(附教程)
https://github.com/AnsonZnl/bookshelf
仿芒果TV https://github.com/Data-Camp/WeApp_Demos/tree/master/%E8%8A%92%E6%9E%9CTV/wechat-Development-master
豆瓣图书<a href="https://github.com/Data-Camp/WeApp_Demos/tree/master/%E8%B1%86%E7%93%A3%E5%9B%BE%E4%B9%A6/DouBanBookApp"> https://github.com/Data-Camp/WeApp_Demos/tree/master/%E8%B1%86%E7%93%A3%E5%9B%BE%E4%B9%A6/DouBanBookApp
企业官网<a href="https://github.com/yaoshanliang/weapp-ssha"> https://github.com/yaoshanliang/weapp-ssha
小游戏
natee/wxapp-2048 ★100+ – 2048 小游戏 https://github.com/natee/wxapp-2048
yaoshanliang/weapp-jump ★100+ – 跳一跳<a href="https://github.com/yaoshanliang/weapp-jump"> https://github.com/yaoshanliang/weapp-jump
yaoshanliang/weapp-monument-valley ★100+ – 纪念碑谷<a href="https://github.com/yaoshanliang/weapp-monument-valley"> https://github.com/yaoshanliang/weapp-monument-valley
其它
huangjianke/Gitter ★700+ – Gitter for GitHub – 可能是目前颜值最高的GitHub小程序客户端 https://github.com/huangjianke/Gitter
lypeer/wechat-weapp-gank ★600+) – Gank 客户端 https://github.com/lypeer/wechat-weapp-gank
charleyw/wechat-weapp-redux ★300+ – Redux 绑定库 https://github.com/charleyw/wechat-weapp-redux
zce/weapp-boilerplate ★300+ – 微信小程序快速开发骨架 https://github.com/zce/weapp-boilerplate
lanshan-studio/wecqupt ★300+ – We 重邮 https://github.com/lanshan-studio/wecqupt
SuperKieran/weapp-artand ★200+ – Artand<a href="https://github.com/SuperKieran/weapp-artand"> https://github.com/SuperKieran/weapp-artand
dongweiming/weapp-zhihulive ★200+ – 知乎 Live https://github.com/dongweiming/weapp-zhihulive
kunkun12/weapp – 小程序 hello world 尝鲜 https://github.com/kunkun12/weapp
SeptemberMaples/wechat-weapp-demo ★100+ – 购物车 https://github.com/SeptemberMaples/wechat-weapp-demo
hijiangtao/weapp-newsapp – 公众号热门文章信息流<a href="https://github.com/hijiangtao/weapp-newsa"> https://github.com/hijiangtao/weapp-newsapp
charleyw/wechat-weapp-redux-todos ★100+ – 集成 Redux 实现的Todo list https://github.com/charleyw/wechat-weapp-redux-todos
hardog/wechat-app-flexlayout ★100+ – flexlayout https://github.com/hardog/wechat-app-flexlayout
zhuweiyou/fetop100 ★100+ – 前端TOP100 https://github.com/zhuweiyou/fetop100
Symous/WechatApp-BaisiSister – 百思不得姐 https://github.com/Symous/WechatApp-BaisiSister
zhengxiaowai/weapp-github – github https://github.com/zhengxiaowai/weapp-github
Seahub/PigRaising – PigRaising<a href="https://github.com/SeaHub/PigRaising"> https://github.com/SeaHub/PigRaising
uniquexiaobai/wechat-app-githubfeed – GitHubFeed https://github.com/uniquexiaobai/wechat-app-githubfeed
kaiwu/weui-scalajs – 使用Scala.js开发<a href="https://github.com/kaiwu/weui-scalajs"> https://github.com/kaiwu/weui-scalajs
tinajs/tina-hackernews – Hacker News 热点<a href="https://github.com/tinajs/tina-hackernews"> https://github.com/tinajs/tina-hackernews
LDouble/WeOUC – WeOUC(教务小程序) LDouble/WeOUC – WeOUC(教务小程序) https://github.com/LDouble/WeOUC
NewFuture/miniprogram-template – 原生API纯TypeScript开发小程序(VSCode as IDE)与完整开发流程 https://github.com/NewFuture/miniprogram-template
arleyGuoLei/wx-words-pk ★100+ –
2020 云开发实现单词对战小程序(随机匹配、人机对战、好友对战),专业UI https://github.com/arleyGuoLei/wx-words-pk
十、小程序运营
资源
We分析 · 小程序数据分析平台(官方视频教程)https://developers.weixin.qq.com/community/business/course/00004a73b1007048bc8ccc66e5140d
腾讯游戏:为什么你的社群不活跃(官方视频教程)https://developers.weixin.qq.com/community/business/course/0008aa0ac4c84048352d30f795c00d
周大福:社群运营团队与个性化服务(官方视频教程)https://developers.weixin.qq.com/community/business/course/000066de8c8b70217d2dc090e5540d
宝岛眼镜:「留量经营」启动期避坑指南(官方视频教程)https://developers.weixin.qq.com/community/business/course/0008ac75244ea08da62d63e4f5b80d
名创优品:从经营位置,到经营人(官方视频教程)https://developers.weixin.qq.com/community/business/course/000a82b2ebc12062b52d8ad8551c0d
十一、小程序赚钱案例
十二、小程序流量主
代开发小程序广告变现解决方案 「流量主代运营」模式 赋能服务商获得持续收益(官方视频教程)https://developers.weixin.qq.com/community/business/course/00068ca2c2c230cc0c2f4a9e956c0d
到这里已经接近4万字,其它部分内容可以看我的主页,内容都是我这些年积累下来的实战经验。
三、微信小程序开发教程?
1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可。2.注册成功后进入首页,在 小程序发布流程->小程序开发与管理->配置服务器中,点击“开发者设置”。3.会获得一个AppID,记录AppID,后面创建项目时会用到。
注意:如果要以非管理员微信号在手机上体验该小程序,那么我们还需要操作“绑定开发者”。即在“用户身份”-“开发者”模块,绑定上需要体验该小程序的微信号。本教程默认注册帐号、体验都是使用管理员微信号
二、下载微信web开发者工具
为了帮助开发者简单和高效地开发,微信小程序推出了全新的开发者工具 ,集成了开发调试、代码编辑及程序发布等功能。1.下载页面:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201715根据系统,选择对应的工具版本下载2.工具包含编辑、调试和项目三个页卡:(1)编辑区可以对当前项目进行代码编写和文件的添加、删除以及重命名等基本操作(2)程序调试主要有三大功能区:模拟器、调试工具和小程序操作区(3)项目页卡主要有三大功能:显示当前项目细节、提交预览和提交上传和项目配置
注意:启动工具时,开发者需要使用已在后台绑定成功的微信号扫描二维码登录,后续所有的操作都会基于这个微信帐号
三、编写小程序实例
1.实例目录结构
2.实例文件说明及源码一个小程序包含一个app(主体部分)和多个page(页面)(1)app是用来描述整体程序的,由三个文件组成,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,必须放在项目的根目录。app.js是小程序的脚本代码(必须),可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量,调用框架提供的丰富的 API。
app.json是对整个小程序的全局配置(必须),用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成。微信小程序中的每一个页面的【路径+页面名】都需要写在app.json的pages中,且pages中的第一个页面是小程序的首页。
app.wxss是整个小程序的公共样式表(非必须)。
(2)page是用来描述页面,一个页面由四个文件组成,这里以首页index为例,每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。index.js 是页面的脚本文件(必须),在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。
index.wxml是页面结构文件(必须)。
index.wxss是页面样式表文件(非必须),当有页面样式表时,页面的样式表中的样式规则会层叠覆盖app.wxss中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用app.wxss中指定的样式规则。
index.json是页面配置文件(非必须),当有页面的配置文件时,配置项在该页面会覆盖app.json的window中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用app.json中的默认配置。这里无需指定。Tips:a.为了方便开发者减少配置项,小程序规定描述页面的这四个文件必须具有相同的路径与文件名b.小程序提供了丰富的API,可以根据自己需求选择(https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=201715)
四、测试小程序实例
1.打开微信web开发者工具,选择“本地小程序项目”。2.填写小程序的AppID,项目名称,选择第三步写好的小程序实例文件夹,点击“添加项目”。3.如果出现如下效果,那么恭喜你,你的第一个小程序项目已经编写成功了!点击左侧边栏“编辑”,还可以在右侧编辑窗口直接对代码进行修改,保存(CTRL+S)后刷新(F5)即可生效。
4.如果想看小程序项目在手机上的效果,点击左侧边栏“项目”,点击“预览”生成二维码,打开微信扫描,就可以看到了。
四、微信小程序怎么制作?
怎么制作微信小程序,
流程一:微信小程序注册
登录微信公众平台,点击立即注册,选择小程序模块。
流程二:微信小程序制作
对于不懂技术和编程的小白,可以采用套用模板的模式通过简单的拖拽方式一键生成微信小程序,方便快捷。
流程三:选用合适模板
在各式各样的模板中,选择适合自己行业的模板
流程四:编辑内容,发布
选择合适的模板模块中编辑内容,填充,丰富。编辑完成之后,就可以发布了。
流程五:进入打包小程序页面,选择代码包下载
流程六:微信web开发工具
进入微信公众平台,下载开发工具
流程七:小程序项目管理,点击添加项目
流程八:小程序APPID
填入申请到的小程序的 AppID,上传刚刚下载的打包文件。在开发者内可以小程序预览,确认无误后,然后上传。
以上就是微信小程序制作教程,希望对大家有所帮助!
五、怎么制作微信小程序?
怎么制作微信小程序?
微信小程序怎么做,是很多线下商家比较关心的问题,下面就和大家分享一下:
步骤一:准备工作
在做微信小程序之前,首先需要准备这个东西,小程序账号、微信支付商户ID和密钥l以及微信支付证书下载。
步骤二:注册一个制作小程序工具
一般这些平台在制作小程序的时候不需要用到代码什么的,直接就可以套用模板,通过自由拖拽组件的方式快速搭建自己的店铺,操作起来非常的方便快捷,在里面,我用的是木鱼小铺平台的工具,里面有各行各业的模板,大家可以根据自己的实际情况选择合适的模板。
步骤三:利用组件快速搭建
在后台利用基础组件和营销插件快速搭建店铺,将组件直接做拖拽到手机端里,上传图片和链接,点击提交即可
步骤四:一键发布
组件设置完成之后,点击保存并发布,发布完成之后,再立即授权给木鱼小铺,木鱼小铺同意之后,再点击一键发布,输入您的微信支付商户ID和微信支付密钥信息,点击提交,给微信官方审核,审核通过之后,就可以在微信上搜索您的小程序了。
以上就是微信小程序怎么做的流程,大家不会的可以参考本文,希望以上的内容对大家有所帮助!
六、微信小程序可以自己制作吗?
微信小程序可以自己制作吗?
- 两个方法,自己去搭建小程序
- 不同的人群,可以选择不同的方法
- 不懂代码也能做,这里都教你
方法一:使用微信开发者工具
微信开发者工具是一款编程软件,可以在里面编写代码,去实现自己需要的功能
代码的知识层面会涉及到javascript,css,小程序api文档,难度比较大的
它们大概长这样:
//index.js文件
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
//index.wxml文件
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
由此可见,一个功能完善一点的小程序涉及到的编程知识面会非常广,适合科班出身的人群
方法二,小程序制作工具,不懂代码也能做
小程序制作工具会为常见的行业,提前开发好了功能,注册一个账户,开箱即用就能搭建小程序。
流程也是很简单,挑选模板,动动鼠标,和搭积木一样搭建小程序,小白也能轻松上手
➜➜
也为大家提前准备好了面面俱到的搭建教程,点击即可阅读
怎么开发自己的小程序?>> 如果回答对你有帮助的话,可以收藏起来慢慢看哦~~~
七、这个微信小程序图片怎么制作?
登录微信公众平台,在小程序设置页面可以下载该小程序的太阳码。
八、微信小程序PPT制作实战教程
为什么选择微信小程序制作PPT?
在日常工作、学习和演讲中,演示文稿(PPT)是一种非常重要的工具。而如今,手机已经成为人们生活中不可或缺的一部分。因此,利用微信小程序制作PPT可以让我们更好地适应这个手机时代,提高工作效率和演示效果。
微信小程序PPT制作的优势
简洁易用:微信小程序提供了丰富的组件和模板,使得PPT制作变得简单快捷,不需要复杂的设计技巧和专业知识。
多平台适配:微信小程序可以在各种终端平台上运行,包括手机、平板和电脑,使得我们的PPT可以随时随地进行展示。
互动体验:通过微信小程序,我们可以在PPT中添加互动功能,比如投票、答题和实时反馈,增强与听众之间的互动性和参与感。
如何使用微信小程序制作PPT
第一步,我们需要在微信开发者工具中创建一个新的小程序项目,并选择PPT模板。
第二步,根据自己的需求,修改PPT的主题、背景、布局、文字和图片等内容。
第三步,添加互动功能,比如设置幻灯片切换效果、插入视频音频、添加动画效果等。
第四步,调整PPT的排版和细节,确保整体展示效果达到最佳状态。
第五步,导出PPT并保存到手机或电脑,准备进行展示和分享。
微信小程序PPT制作注意事项
- 保持简洁明了的设计风格,尽量不要过多使用花哨的特效和动画。
- 注意排版的合理性,文字要避免过长或过小,图片要保持清晰度。
- 测试PPT在不同设备上的兼容性,确保展示效果一致。
- 合理控制PPT的内容和时间,不要让演示过于冗长。
结语
微信小程序为我们制作PPT提供了便利和灵活性,使得我们能够更好地展示自己的思想和观点,与听众进行互动和交流。希望本文提供的微信小程序PPT制作实战教程能帮助到您,更好地运用这一工具,提升工作效率和演示效果。
感谢您阅读本篇文章���希望能对您有所帮助!
九、如何制作微信小程序?需要哪些软件?
随着科技的发展,现在制作小程序已经是非常简单的事情了
可以有很多种方式去制作小程序,常见的就有:
- 外包公司定制
- 源码自己开发
- 网上开源代码二次开发
- 小程序模板制作工具
不同的方式,需要的知识和软件都不一样的。
自己懂代码的,可以安装开发者工具来自己开发代码。预算充足的,也可以外包定制给软件公司
中小企业的话, 更多人是选择使用《小程序模板制作工具》的方式
因为操作简单,无需代码知识~~~
那么,怎么利用小程序制作平台去做小程序呢?
轻松三步,教你快速搭建自己的小程序!!!小白也能轻松制作~~
第一步,注册小程序
搜索并打开微信公众平台,右上角的立即注册,选择小程序,按照页面的要求一步步填写自己的资料,这个小程序就是提供给客人日后的使用入口,会有自己的小程序名称,自己的品牌logo等等
ps:最好使用营业执照去注册小程序
第二步,搭建小程序
进去小程序制作工具,这里以呱呱赞小程序为例,挑选一个适合自己的模板,进行二次编辑,动动鼠标就能完成,和搭积木一样简单
戳下方直达:
第三步,发布小程序
在系统里面,扫码授权在前面注册下来的小程序,将自己做好的小程序模板关联起来,这样打开小程序就能预览到小程序最终的样子了,还能一键提交审核,正式开启小程序之旅
看完是不是觉得很简单呢?
其实找对了方法,就算不懂代码的小白也是能开发自己的小程序!
感兴趣的小伙伴,快快戳下方尝试一下~~
十、微信小程序如何制作开发?
微信小程序是一种基于微信平台的轻量级应用,可以在微信内直接打开和使用。以下是制作微信小程序的一般步骤:
1. 注册小程序账号:首先需要在微信公众平台注册小程序账号,并进行认证。注册完成后,在小程序管理后台中创建一个新的小程序。
2. 选择开发方式:微信小程序支持两种开发语言:基于微信官方提供的小程序开发框架Weixin App Tools(简称为WXML)进行开发;另外,还可以使用第三方开发工具来开发,如Taro、uni-app等。
3. 设计小程序界面:根据小程序的需求和功能,设计小程序的界面,包括页面布局、图标、字体和配色等。
4. 编写小程序代码:根据设计好的界面和小程序的功能需求,编写小程序的前端和后端代码。
5. 测试和调试:在编写完代码之后,需要进行测试和调试,确保小程序能够正常运行并且满足用户需求。
6. 提交审核:测试通过后,将小程序提交到微信小程序审核中心进行审核。审核通过后,小程序就可以发布了。
7. 小程序上线:小程序上线后,可以在微信搜索或扫描小程序码进入小程序,开始使用。
总之,制作微信小程序需要进行账号注册、选择开发方式、设计小程序界面、编写代码、测试调试和提交审核等多个步骤,需要耐心、细心并具备一定的编程技能。