您的位置: 首页 > 小程序开发 > 微信小程序项目实例

微信小程序项目实例

2021-04-21 12:12:03        栏目: 小程序开发

微信小程序项目实例一: 微信小程序怎样开发?来看详细的开发教程-免费微信小程序生成

微信小程序怎样开发?今天,小编要跟大家分享是图和通过开发者工具来完成小程序的创建和代码编辑。

首先要下载开发者工具,安装完成后,打开并使用微信扫码登录。选择创建“项目”,填入上文获取到的AppID,设置一个本地项目的名称(非小程序名称),比如“我的第一个项目”,并选择一个本地的文件夹作为代码存储的目录,点击“新建项目”就可以了。

为方便初学者了解微信小程序的基本代码结构,在创建过程中,如果选择的本地文件夹是个空文件夹,开发者工具会提示,是否需要创建一个quickstart项目。选择“是”,开发者工具会帮助我们在开发目录里生成一个简单的demo。

项目创建成功后,点击该项目,进入并看到完整的开发者工具界面,点击左侧导航,在“编辑”里可以查看和编辑我们的代码,在“调试”里可以测试代码并模拟小程序在微信客户端效果,在“项目”里可以发送到手机里预览实际效果。

1.代码编写

点击开发者工具左侧导航的“编辑”,我们可以看到这个项目,已经初始化并包含了一些简单的代码文件。最关键也是必不可少的,是app.js、app.json、app.wxss这三个。其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件。微信小程序会读取这些文件,并生成小程序实例。

先了解这三个文件的功能,方便修改以及从头开发自己的微信小程序。

app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的API,如本例的同步存储及同步读取本地数据。

app.json是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。

app.wxss是整个小程序的公共样式表。我们可以在页面组件的class属性上直接使用app.wxss中声明的样式规则。

2、创建页面

在这个教程里,我们有两个页面,index页面和logs页面,即欢迎页和小程序启动日志的展示页,他们都在pages目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在app.json的pages中,且pages中的第一个页面是小程序的首页。

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。

index.js是页面的脚本文件,在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。

页面的样式表是非必要的。当有页面样式表时,页面的样式表中的样式规则会层叠覆盖app.wxss中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用app.wxss中指定的样式规则。

index.json是页面的配置文件:

页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖app.json的window中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用app.json中的默认配置。

logs页面使用控制标签来组织代码,在上使用wx:for绑定logs数据,并将logs数据循环展开节点。

3、手机预览

开发者工具左侧菜单栏选择‘项目’,点击‘预览’,扫码后即可在微信客户端中体验。

最终还需要发布小程序进行审核,审核通过后就可以在微信的内部看到微信小程序的,此时就可以通过搜索关键词找到微信小程序了,微信小程序怎样开发制作,看完以上教程你学会了吗?


微信小程序项目实例二: 店长宝微信小程序怎么做成的?看完你也可以单独开发小程序

随着微信跳一跳小程序的的一度风靡,微信聊天界面下拉快速打开微信小程序。现在市面上越来越多的公司和门店想做自己的小程序来为自己的生意进行导流。如果你的客户有小程序方面的需求,而你没有专业的小程序开发人员怎么办?

下面店长宝先来简单的讲一下微信小程序怎么做:

一、常规代码式

一般有技术实力的公司开发小程序是依照微信官方的代码形式开发,这种方法优点就是,制作出的小程序界面、样式排列各不相同,功能也比较丰富。但是一般中小型传统企业并不具备这种开发实力。

1.获取微信小程序的AppID

首先需要登录微信公众号平台小程序,就可以在网站的“设置”-“开发者设置”中,查看到微信小程序的AppID了,注意不可直接使用服务号或订阅号的AppID。

2.创建项目

工具安装完成后,打开并使用微信扫码登录。选择创建“项目”,填入上文获取到的AppID,设置一个本地项目的名称(非小程序名称),并选择一个本地的文件夹作为代码存储的目录,点击“新建项目”就可以了。

项目创建成功后,我们就可以点击该项目,进入并看到完整的开发者工具界面,点击左侧导航,在“编辑”里可以查看和编辑代码,里边已经初始化并包含了一些简单的代码文件。很关键也是必不可少的,是app.js、app.json、app.wxss这三个。微信小程序会读取这些文件,并生成小程序实例。在“调试”里可以测试代码并模拟小程序在微信客户端效果,在“项目”里可以发送到手机里预览实际效果。

二、使用第三方小程序开发工具

这种方式是使用第三方的小程序开发工具,这类工具一般都不需要编程。区别于微信小程序官方的代码编辑器,这类工具是图形化的界面。把图片、文字、音乐等等东西插入,然后设置它们的效果,编辑好后,使用这类工具直接自动小程序代码,把生成的小程序代码上传到微信审核就可以上线自己的小程序了。简单直接的办法就是运用案例模板,修改一些产品和图片就可以展示了,这对中小型企业非常适用。这一般有专门的开发公司在做,也非常适用于正在找项目的小老板,可以拿个代理开发后台去开发商家客户。

三、专业的微信小程序开发公司

这类企业都有专门的技术团队和丰富的开发经验,商家只要把需求提供给公司,然后跟技术进行交流一下,把你的想法和需求说明,就可以开始了。

以上问题解决了如何做小程序,微信小程序怎么做。在这里推荐大家去店长宝做微信小程序,专业的技术团队,给你做单独开发后台

智能可视化拖拽小程序制作系统,一键拖拽、快速生成各种小程序!史上最牛小程序系统,各种模块任意组合DIY,几秒钟即可制作出高大上的小程序!

OEM贴牌简介:贴牌商拥有独立总后台,可以管理自己的代理商和终端客户,可给下级代理商贴牌,可拥有自己的独立小程序服务品牌后台!

客服全天实时在线解疑答惑,辅导代理商快速开通商家客户。

店长宝小程序全国招商中V(13273819120)


微信小程序项目实例三: 微信小程序开发教程

最近小程序火了,是时候收藏一波了!

1:微信小程序官方工具:https://mp.weixin.qq.com/debug/w...tml?t=1476434678461

2:微信小程序简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599

3:微信小程序设计指南:

4:微信小程序设计资源wxadoc/design/#

5:微信小程序公测接入指南:http://www.wxapp-union.com/portal.php?mod=viewaid=259

6:微信小程序支付文档:https://pay.weixin.qq.com/wiki/d...pi.php?chapter=3_1#

7:微信小程序新手入门宝典:http://www.wxapp-union.com/forum.php?mod=viewthreadtid=1989

8:微信小程序免费:http://www.wxapp-union.com/forum.php?mod=forumdisplayfid=37filter=typeidtypeid=7

9:微信小程序实战宝典:

10:微信小程序从注册到上线系列:http://www.wxapp-union.com/forum.php?mod=viewthreadtid=4375

11:微信小程序精品合集:

一斤代码解读--小程序视图层处理增强之WXS

小程序的红利期

开发者工具版本更新:202017.08.31(1.01.170831)

小程序如何快速获得3000用户?

极乐技术周报(第二十四期)

“小程序”前景未明,战火却越燃越旺

小程序开发工具全新上线

支付宝的社交虽干不过微信,但做小程序绝对比微信更适合!...

有关小程序wx.navigateTo层叠5次限制

在微信小程序中使用富文本转化插件wxParse

在微信小程序的JS脚本中使用Promise来优化函数处理

小程序拉锯战爆发,支付宝找准微信的“命门”了吗

关注度日趋下降的小程序,究竟是腾讯怎样的一步棋?

程序员的七夕表白模式

小程序开发:上传图片到腾讯云

腾讯推出升级版“七夕黄金红包”,借社交关系链推动黄金交易...

如果达尔文还在,微信和支付宝就还会因为小程序“掐”起来吗?...

像VUE一样写微信小程序-深入研究wepy框架

小程序新功能--手机号快速填写及会员卡开卡组件开放

极乐技术周报(第二十三期)

小程序页面效果之--滑动屏幕加载数据

如何通过公众号+小程序,打造微信内电商生态闭环?

小程序实战--天气预报

支付宝、微信的正面对决,这可能是一场没有输家的战争!

2017微信上海公开课:专注场景的小程序如何实现商业转化?

开发者工具版本更新:2017.08.22(0.22.202200)

实战--小程序扫雷

我从微信与支付宝小程序之争窥见的未来

正面对决小程序:微信支付宝高低有别败局全无?

小程序生成小程序码(thinkphp)

解决微信小程序wx.request请求的并发数限制、不支持异步问题...

POI微信小程序实战

Charlotte微信小程序开发(三)--交互反馈

Charlotte微信小程序开发(二)--网络请求

Charlotte微信小程序开发(一)--数据存储

为什么微信的小程序这么受关注?

小程序分享等能力升级

实战案例--用Java编写基础小程序

支付宝copy微信小程序代码被扒:官方发布道歉信

【重磅消息】-支付宝小程序可以申请公测啦!!!

Flex实现表格布局(微信小程序)

thinkphp5+easywechat开发小程序支付

小程序能力升级

闲聊-智能对话:微信小程序详解

半年过去,小程序的冰火真相

极乐技术周报(第二十二期)

Yii2小程序组件

从0开始写小程序(三、四)前台循环数据绑定获取循环元素id以及wx.login登录操作.

从0开始写小程序(一、二)点击事件,获取元素id,页面传值获取js里的数据......

小程序将是商业社交场景爆发的助推器

【微信小程序】自定义模态对话框实例

小程序获取用户信息新方式!

“走心聊聊”小程序访问量破1700万,微信被立案调查又有一波封号潮?...

精简:小程序实现选项卡效果的方法之一

Ubuntu16.04下部署Node.js+MySQL微信小程序商城

小程序开发的一些最佳实践

eweapp:ECShop非官方版微信小程序商城

Android开发不用学CSS,从0开始学习微信小程序

厦门国税全国率先推出掌上办税微信小程序

打赏小程序火了:百万人网络讨饭令人不经感到乍舌

小程序如何零成本推广获取10万用户?

【基础】微信小程序flex布局

【前端样例】微信小程序多商品评价评星提交

.NET开发微信小程序-上传图片到服务器

WordPress网站开发“微信小程序“实战(四)

WordPress网站开发“微信小程序“实战(三)

WordPress网站开发“微信小程序“实战(二)

WordPress网站开发“微信小程序“实战(一)

极乐技术周报(第二十一期)

养车记账本小程序开发实例

小程序时代,APP运营人员该如何应对?

小程序模板--评分星星

不止于“小程序”,微信更新上线“插件”功能

小程序开群分享入口:微信终归要抢回被淘宝分走的电商生意...

为微信小程序增加mixin扩展

深入wepy小程序组件化框架

小程序新能力

理解微信小程序技术架构

美团点评点餐终端团队招聘

首个App直接跳转小程序案例诞生

解决繁琐的小程序会话管理,自带登录态管理的网络请求组件......

小程序新增新入口-微信群

xiaochun系列教程--微信小程序实现转发

技术团队如何制定个人发展规划(IDP)

【观点】数据即权力,无现金社会就是一场大数据的圈地运动...

小程序+社交营销赋能商家微信推无现金活动

极乐技术周报(第二十期)

黄秀杰小程序入门佳品——增删改查+页面跳转+传值取值+布局样式.........

XpmJS——小程序后端开发思考和实践

整合微信小程序的WebAPI接口层的架构设计

g微信小程序实践(一)用Promise封装API

张小龙终于没有忍住寂寞,还是让小程序发力社交了

小程序实战--仿bilibil(哔哩哔哩)小程序

全栈工程师之路-中级篇之小程序开发-第一章第二节注册小程序和开发工具讲解...

全栈工程师之路-中级篇之小程序开发-第一章第一节注册小程序......

京东小程序的三生三世

[微信小程序]上传图片到阿里云OSS

写了一个时间管理的小程序

解决微信小程序要求的TLS版本必须大于等于1.2的问题

见微知著,从小需求里看产品的抉择和定位

SundayAaron微信小程序开发——wx.showToast(OBJECT)的使用

[微信小程序]入门学习知识点_UI布局

dll动态库的开发与调用及文件的读写小程序

黄秀杰实战系列--灵动商城姊妹——灵犀外卖新鲜出炉

基于Mobx的多页面小程序的全局共享状态管理实践

极乐技术周报(第十九期)

GoogleInstantAppsVS微信小程序

TP3.2校验微信公众号||小程序服务器地址

【mangosuch】小程序server-3-搭建WebSocket服务

小程序升级用户信息和UnionID的获取方式

深大的树洞小程序版本迭代与优化记录

最全面的微信小程序半年度复盘总结

【mangosuch】小程序server-2-实现会话层

【mangosuch】小程序server1-搭建HTTPSserver

两年内公众号将快速衰落?10个关键词看懂公众号的下半场

博主招募令|技术大舞台有才你就来!

开发微信小程序中SSL协议的申请、证书绑定、TLS版本处理等

餐饮小程序来了,我们还会用美团外卖吗?

新增“一次性订阅消息”接口

小程序马力十足,逆天功能4连发!

苹果取消打赏抽成,但不一定是出于自愿

小程序新增状态信息展示等能力

张小龙亲手操刀的微信小程序半年度复盘总结,全都在这里,唯一一份!—20170720早读课

开发者工具版本更新:0.20.191900(更新详情)

PythonFlask小程序文件(图片)上传技巧

黄秀杰实战教程--购物车动画与加减

xiaochun系列教程--自定义消息提示框

公众号迁移掉粉20%,违规记录合并会被封号吗?

极乐技术周报(第十八期)

一张图带你看懂小程序发展蓝皮书

老胡--足球小程序开发之页面数据绑定及跳转传参

社交电商怎么玩?小程序又能起什么作用

黄秀杰教程--灵犀外卖选购页实现切换分类与数量加减

动车能叫外卖的第一天,我订了一份吮指原味鸡

小程序个人用户实现微信支付的方法

小程序登录态控制探索全过程

老胡--足球小程序开发之Tab切换

国内首家通过ISO/IEC27018标准认证,企业微信安全管理获国际认可...

通过新浪云部署NideShop微信小程序商城(基于Node.js+MySQL+ThinkJS)...

分享一个同城拼车的微信小程序(前端+后端)

小程序个人开发者的经验总结

购物小程序开发,移动电商新机遇

xiaochun系列教程--微信小程序WeUi.wxss

小程序开发之开发适配、禁止拖动进度

小程序开发入门

关于微信小程序的思考:运营者该何去何从

高考志愿导师小程序项目的开发过程全解析

极乐技术周报(第十七期)

xiaochun系列教程--微信小程序Pickerrich-text

小程序可以显示群名称啦!

开发者工具版本更新:2017.07.11(0.19.191100)(更新详情)

小程序升级页面体验相关能力

极乐科技CEO应邀出席2017微信小程序生态课

临摹帖——仿写饿了么个人中心页面

揭秘5个微信查询新体验

[微信小程序开发问答《四十八》http://www.wxapp-union.com/article-2676-1.html)

APP战略分析:做小程序,还是大入口?

腾讯云搭建微信小程序服务

javascript/微信小程序中将String进行Base64编码并UTF-8格式输出

章鱼小程序项目开发总结

小程序版本的AutoDraw

java微信小程序参数二维码生成带背景图加字体(无限生成)

公众平台新增小程序运维中心等功能

商家想用微信小程序杀出营销困局,这些功能你了解了么?精华收藏......

Bmob基本RESTAPI的python封装

极乐技术周报(第十六期)

【微信小程序】发送消息模板教程(后台以PHP示例)

一个颇具创意的农业互联网+微信小程序:沁香农

让Wordpress成为你微信小程序的文章管理利器

手机短信验证码

小程序拖动排序demo

owindwo微信小程序版本(影视推荐、音乐播放、地图、api)

一个计划清单类的微信小程序ToDoList

高仿网易严选的微信小程序商城(微信小程序客户端)界...

拨盘Demo大赛作品展示

极果微信小程序(商品试用、功能完善界面nice!)

汇率兑换计算Demo

电商商城小程序后台及小程序源码

基于Bmob开发问答小程序Demo实录

小程序-城市三级联动

连接后台方面的疑问

6月12日更新:小程序开发DEMO

小程序支付详解+源码(客户端+服务端)2017-06-11

6月12日更新:小程序推荐

今日小程序推荐:天天码图-极乐小程序商店2017-06-09

今日小程序推荐:简历快手2017-06-08

今日小程序推荐:作文精选2017-06-07

今日小程序推荐:腾讯小程序2017-06-06

今日小程序推荐:自选股2017-06-05

今日小程序推荐:博卡名片王2017-06-04

今日小程序推荐:烛照艺术+2017-06-03

今日小程序推荐:狼人杀小法官2017-06-02

由于文章篇幅限制,各位可移步至小程序社区

转载自:https://www.jianshu.com/p/7678f60ecb3a