响应式网页设计、开放源代码、永久使用、不限域名、不限使用次数

微信小程序简单的例子(推荐)7篇

2024年微信小程序简单的例子 篇1

小程序只是某种特定类型的程序的称呼,他的功能可以是各种各样的,当然能力范围是有限的,前面的答主也有讲过了,在能力范围内综合微信给予的接口,可以实现大部分APP的能力。

小程序未来的主要应用范围除了游戏及APP导流以外更多的是在辅助线下操作,这么说可能不是很容易理解,简单的举个例子说一下八城平台的免费餐饮小程序。

在都市中大多数人的午餐都是在餐厅吃的,而饮食习惯都一样,所以我们经常会遇到点餐排队、等餐排队、结账排队等问题,而我们叫外卖又面临着配送费,商家也要承担外卖平台的服务费,电话叫餐又没有图片,每次点餐都犹豫半天或者充满疑问。综合以上问题就诞生了“自助点餐小程序”商家有了自助点餐小程序之后,消费者到店不用排队点餐直接找个餐桌坐下就行,然后打开微信扫描桌台二维码,通过每个桌台独立的二维码自动记录餐桌号或者包间号,扫描二维码之后进入小程序开始点餐,点餐后直接付款,商家如果有链接打印机的话打印机可直接打印订单,出餐后服务员根据订单的桌号送餐,消费者吃完可直接离店,在店内解决消费者排队的问题,也解决了服务高峰压力的问题,同时小程序还同步支持外卖点餐,只要是通过非扫描桌台二维码的任何方式进入小程序,就可以进行点外卖操作,和大多数的外卖平台操作类似,不用担心操作习惯的问题。

2024年微信小程序简单的例子 篇2

自己慢慢学了,多看看微信官方手册,多做案例,最后多做项目,可以先找一份开发相关的工作,有时间接触到公司项目,参与进去,会提高很快的。

可以学点h5,先从前段端入手,再学一下php,写一些后台程序,慢慢的就上手了,前提是一定要多动手,不要光看,眼高手低。

第三方做的小程序有一定的局限性,就是拖拽性质,小程序开发真正的好项目还是定制开发,所以多从基础做起,多做项目,慢慢的经验就丰富起来了。

我是一个老码农,欢迎关注交流!

2024年微信小程序简单的例子 篇3

序:北漂做了几年的程序猿,英语水平极差,所以在程序上没有太高的造诣,但是还是想把自己所能做的的记录下来。

下边来完成一个微信小程序的车辆违章查询,在最后我会放上源码链接,所以内容上就不对代码做太多解释,只说下思想。

1:数据来源,车辆违章查询的数据来源想到的就是三方接口,那么我选择的是以前做公众号开发时候时候的聚合数据(API数据接口_开发者数据定制),注册申请。

进入全国车辆违章查询可以看到三个接口:1:获取支持城市参数接口 2:请求违章查询接口3:接口剩余次数请求。有了这三个接口就可以实现一个简单的车辆违章查询了。

2:微信小程序,有了数据的来源就等于有了灵魂,之后就是怎样利用数据源来实现了,首先就是小程序的学习。安装以及创建项目。查看文档(https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476197488080)

个人建议先把文档看一遍,这一遍并不是要记住文档,而是要在脑子里对小程序有一个初步的印象,更重要的是建立一个索引目录,之后开发的时候能够根据目录索引到具体位置。

一遍文档看下来,首先想到的是需要哪些知识才能开发

懂一点html,css,js,每个页面包括一个js,ixml,wuss

之前有对react native (react native)了解点,发现在页面与数据交互上有很多的相似,建议有兴趣的可以看了解一下,有助于理解。

API方面因为之前做过公众号开发,所以看了一下应该是wxjs的接口开放。

安装创建工程根据文档来就好了,因为没有内测号就只能创建一个无appid的项目

下载IDE创建项目:MyCar

ui方面需要三个:主页,添加查询车辆信息页,查询页

在app.json中加入三个页面

"pages": [

"pages/home/home",

"pages/addcar/addcar",

"pages/query/query"

]

主页需要展示添加查询车辆列表以及添加车辆

点击添加车辆需转到添加页面

在wxml中添加按钮的组建对应的js中实现对页面的跳转

home.wxml:

<view wx:if="{{surplus >= 0}}">

<button type="default" bindtap="bindtapAdd" hover-class="other-button-hover"> 添加车辆 </button>

</view>

home.js:

bindtapAdd:function(){

wx.navigateTo({

url: '../addcar/addcar'

})

},

在添加页面要做的是将车辆信息缓存的微信的本地,那么就需要使用聚合的接口来获取支持的城市供用户选择,获取聚合的数据后需要做一个二级联动,由于还没有太多时间来研究wxcss所以页面做的比较粗糙。

当用户填好数据后存储到数据缓存,这里涉及到两个知识点一个是请求url一个是数据缓存

请求可查询城市数据

requestCitys:function(){

var page = this;

wx.request({

url: 'http://localhost:3000/wz/citys',

header: {

'Content-Type': 'application/json'

},

success:function(res){

var res = res.data;

page.analysisRes(res);

},

fail:function(res){

page.setData({

toastInfo:util.toErrMsg(0),

toastHidden:false

})

console.log(res);

}

})

}

保存用户数据并且退回到主界面

wx.setStorageSync('cars',cars);

wx.navigateBack();

用户在主界面需要将缓存的数据用列表形式展示并且点击列表后需要使用查询车辆违章接口进行查询

home.js

//加载列表数据

reloadData:function(){

var value = wx.getStorageSync('cars')

if (value) {

var cars = [];

var i = 0;

for(var key in value) {

cars[i]= value[key];

i++;

}

this.setData({

cars:cars

})

}

},

//跳转到查询页面

onclikItem:function(e){

var id = e.target.id;

var carname = this.data.cars[id].name

wx.navigateTo({

url: '../query/query?carname='+carname

})

},

home.wxml:

<scroll-view scroll-x="true">

<viewwx:for="{{cars}}" wx:for-index="idx" wx:for-item="car">

<view id="{{idx}}" bindtap="onclikItem">

<text id="{{idx}}">

{{car.name}}

</text>

<text id="{{idx}}">

{{car.showhphm}}

</text>

</view>

</view>

在查询页面需要调用查询接口

requestQuery:function(car){

var hphm = encodeURI(car.city.abbr+car.hphm)

var page = this;

wx.request({

url: 'http://localhost:3000/wz/query',

method:'POST',

data:{

key:page.data.AppKey,

city:car.city_code,

hphm:hphm,

hpzl:car.hpzl,

engineno:car.engineno,

classno:car.classno

},

header: {

// 'Content-Type': 'application/json'

},

success: function(res) {

var res = res.data;

if(res.resultcode == 200){

console.log(res.result.lists);

page.setData({

lists:res.result.lists

})

}else{

page.setData({

toastInfo:res.reason,

toastHidden:false

})

console.log(res);

}

},

fail:function(res){

page.setData({

toastInfo:util.toErrMsg(0),

toastHidden:false

})

console.log(res);

}

})

}

这样小程序的基本功能就算完成了,这里要说下的是小程序测数据与页面刷新很类似react native ,Page中的data数据改变,wxml中使用数据的的组件就会自动刷新,这个跟以往我做android ios 的略有区别,适应下就好了。

下面说下中转路由,这次选用的是node的express作为web服务器 数据库用嘛mongodb,这个是才接触的所以使用的也比较初级。

Node.js

Express - 基于 Node.js 平台的 web 应用开发框架

建议安装Homebrew这样会比较方便

Homebrew

Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

译注:在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:

sudo chown -R `whoami` /usr/localbrew install node

$ npm install express --save

创建web服务器MyCarServer,编辑器个人习惯用Sublime Text: The text editor you'll fall in love with

这里需要再下载两个扩展包用来实现post以及mongodb的连接

GitHub - expressjs/body-parser: Node.js body parsing middleware

$ npm install body-parser

GitHub - Automattic/mongoose: MongoDB object modeling designed to work in an asynchronous environment.

$ npm install mongoose

安装mongoldb这个我是看的视频,大家页可以自行百度

http://www.jikexueyuan.com/course/1976_1.html?ss=1

项目中创建models.js来驱动数据库

var config = require('./config.json');

// var uri = 'mongodb://username:password@hostname:post/databasename';

var host = config.host;

var port = config.port;

var dbName = config.dbname;

var uri = 'mongodb://' + host + ':' + port + '/' + dbName

var mongoose = require('mongoose')

console.log('uri:', uri)

mongoose.connect(uri);

var CarStatusScheme = new mongoose.Schema({

cachetime: Number,

resdata: String

})

var CarCitysScheme = new mongoose.Schema({

cachetime: Number,

resdata: String

})

var CarQueryScheme = new mongoose.Schema({

cachetime: Number,

resdata: String,

hphm: String

})

mongoose.model('CarStatus', CarStatusScheme);

mongoose.model('CarCitys', CarCitysScheme);

mongoose.model('CarQuery', CarQueryScheme);

在app.js中

var mongoose = require('mongoose');

require('./models.js');

在创建config.json用来做一些常规配置

{

"dbname": "mycar",

"port": "27017",

"host": "localhost",

"statuscache": 1000,

"cityscache": 1000,

"querycache": 1000,

"debug": true

}

在app.js中使用配置

var config = require('./config.json')

var debug = config.debug

get请求

//接口剩余请求次数查询

// 请求示例:http://v.juhe.cn/wz/status?key=xxxxxxx

// 请求参数说明:

// 名称 类型 必填 说明

// key string 是 应用APPKEY(应用详细页查询)

// dtype string 否 返回数据的格式,xml或json,默认json

// 返回参数说明:

// 名称 类型 说明

// error_code int 返回码

// reason string 返回说明

// data - 返回结果集

//   surplus string 剩余次数

app.get('/wz/status', function(req, res) {

if (debug) {

http://console.info('http get /wz/status')

}

CarStatus.find({}, function(err, docs) {

if (err) {

console.error("CarStatus.find err:", err)

} else {

if (docs.length > 0) {

var carStatus = docs[0];

var curtime = Date.now();

var cachetime = carStatus.cachetime;

if (curtime - cachetime < statuscachetime * 1000) {

var resData = carStatus.resdata;

res.json(JSON.parse(resData))

} else {

requestJHStatus(res);

}

} else {

requestJHStatus(res);

}

}

});

});

post 请求

// 接口地址:http://v.juhe.cn/wz/query

// 支持格式:json/xml/jsonp

// 请求方式:post get

// 请求示例:http://v.juhe.cn/wz/query?city=SH&hphm=苏L50A11&engineno=123456&key=key

// 接口备注:因交管局线路迁移,即日起至四月底安徽,山东,杭州等省市偶尔出现临时维护,请关注

// 调用样例及调试工具:API测试工具

// 请求参数说明:

// 名称 类型 必填 说明

// dtype string 是 返回数据格式:json或xml或jsonp,默认json

// callback String 否 返回格式选择jsonp时,必须传递

// key string 是 你申请的key

// city String 是 城市代码 *

// hphm String 是 号牌号码 完整7位 ,需要utf8 urlencode*

// hpzl String 是 号牌类型,默认02,暂只支持小型车

// engineno String 否 发动机号 (根据城市接口中的参数填写)

// classno String 否 车架号 (根据城市接口中的参数填写)

// 返回参数说明:

// 名称 类型 说明

// province String 查询省份代码

// city String 查询城市代码

// hphm String 查询的号牌号码

// lists Array 违章列表

// date String 违章时间

// area String 违章地点

// act String 违章行为

// code String 违章代码(仅供参考,不一定有值)

// fen String 违章扣分(仅供参考,不一定有值)

// money String 违章罚款(仅供参考,不一定有值)

// handled String 是否处理,1处理 0未处理 空未知

app.post('/wz/query', function(req, res) {

if (debug) {

http://console.info('http post /wz/query')

}

console.log(req.headers['content-type'])

http://console.info('/wz/query req.body:', req.body)

// http://console.info('/wz/query req.data:', req)

var carquery = new CarQuery({

hphm: req.body.hphm,

cachetime: Date.now()

})

http://console.info('/wz/query hphm:', carquery.hphm)

CarQuery.find({

'hphm': carquery.hphm

}, function(err, docs) {

if (err) {

console.error("CarQuery.find err:", err)

} else {

if (docs.length > 0) {

var carQuery = docs[0];

var curtime = Date.now();

var cachetime = carQuery.cachetime;

if (curtime - cachetime < querycache * 1000) {

var resData = carQuery.resdata;

res.json(JSON.parse(resData))

} else {

requestJHQuery(req.body, res);

}

} else {

requestJHQuery(req.body, res);

}

}

});

});

post请求需要引入body-parse

var bodyParser = require('body-parser');

// parse application/x-www-form-urlencoded

app.use(bodyParser.urlencoded({

extended: false

}))

// parse application/json

app.use(bodyParser.json())

这里还有一个未解决的就是小程序中请求中如果设置

header: {

// 'Content-Type': 'application/json'

},

在web服务器中是接收不到body数据的,所以暂时的解决方式是注释 // 'Content-Type': 'application/json'

这样就算完成了基础功能

哎!不会文章表达还是微信(xiongandaqu)沟通吧

2024年微信小程序简单的例子 篇4

什么是微信小程序,在今年1月9号,微信上线了期待已久的小程序,小程序是不需要安装不需要卸载,打开即可使用的一种小程序,是基于微信生态的一种轻应用,功能使用上类似APP的感觉,目前微信小程序已经开放给所有企业申请开放和使用,微信统一审核上线,微信小程序在未来和公众号一样,每个企业或者个体工商户都必须标配的小应用程序,或许在不久的将来,在街头小巷都可以看到小程序的海报二维码,小程序让所有的街头店面都有实现O2O的可能,小程序从某种意义上来讲要比公众号还方便一些。订阅号侧重于内容发布,服务号侧重于粉丝商品变现,那么小程序呢,不能关注,不聚合粉丝,不强化营销,用完就走,好下次再用,不好删除,真正的不骚扰用户,靠质量和功能来赢取用户的二次使用。小程序的入门非常封闭,只有两种,一种是通过搜索小程序名称来获得,并且是精准搜索,不支持模糊搜索,差一个字都搜不出来,也许以后会调整,但看出来这是微信故意这样安排的。另外一种是只能扫二维码进入,这个二维码不支持微信长按扫码,只能是对着电脑或者海报或者另外一部终端上的二维码扫码,彻底切断了微信内部传播和营销的途径,在分享方面,目前只支持分享到好友和微信群,不支持分享到朋友,因此在推广运营上受到了一定限制。下面我们具体来说几种未来可能小程序的运营推广途径:第一:微信群分享小程序一出生就注定只能在微信群里传播,因此微信群的价值又一次来了,如果你有一款小程序,赶紧加上上千个微信群吧,把小程序分享到上千个,上万个微信群,应该是一次很好的传播。不知道微信官方是怎么想的,是不是微信群发的链接多了也会封号呢,会不会成为恶意营销呢,以前有人在微信群里推广公众号二维码被封号了不少,反正微信的政策总是马后炮,不从技术上限制,等你做了再来收拾你,以前公众号刚出来的时候也是这样的,全民申请,全民创业开发,两年后有的人做的很大了,然后出一些奇葩政策统统封杀,可以一眼望去,在微信生态里面有哪个服务号做的很出名的,基本没有,有的基本被封杀了,从服务号上可以看的出来,微信生态是不可信任的,也是不可倚靠的,小程序谁能把它做大?花了几百万去推广起来,一个公告将你死不瞑目。当然除非遵守小程序各种规范,也许是可以生存的,但是作为一种商业工具是离不开推广宣传的,不断的做商业活动也许才能够推广起来,反正大家在推广小程序的时候,特别是在微信群里推广的时候,千万要小心,被扣上恶意营销的帽子,成为首批烈士。第二,结合新媒体,内容运营小程序注定是一个工具,工具本身并没有传播的属性,只能够让更多人使用这个工具,就要做品牌营销,那么目前火爆的各大新媒体平台是推广小程序最好的利器,通过各大新媒体平台的内容输出,不断的强化内容,在内容中可以穿插品牌,穿插小程序名称,当用户对你的内容感兴趣的时候顺便寻找你的小程序来使用,很多内容大咖,早都在自己的内容中介绍了小程序的名称,比如十点读书,我已经在很多文章和他的音频节目中听到多次介绍小程序的环节,新媒体永远是吸引粉丝和宣传品牌的最好渠道,如果一个企业用好新媒体,将为企业大大节省广告费用。第三,各大小程序市场小程序出生之后,就没有集中的市场或者商店,而且张小龙已经明确强调,小程序是不做集中流量商店,永远是去中心化的思维模式,这就给很多创业者提供了创业机会,相信很多互联网公司都会做小程序的商店或者发布平台,比如 豆芽导航,在第一时间就上线了小程序自助发布接口,有小程序的人就随意上去发布自己小程序,让更多的人知道,当然类似豆芽导航的小程序发布平台有很多,都可以入驻上去发布,总的来说会得到相应多的曝光机会,有的小程序应用市场有很高的流量,将会带来不错的效果。第四,线下推广小程序是有二维码的,这个二维码可以张贴到自己门店,或者比较醒目的地方,记得以前经常有人拿着公众号二维码做线下推广,扫一扫送豆芽菜,扫一扫送小礼品等这样的活动,那么小程序出来之后会不会也有这样的情节再次出现呢,毕竟很多商家都像抢占先机,让自己的小程序早点让人知道和使用。关于小程序的推广相信有很多人会想出更好的办法做运营,大家的聪明才智一定是非常强大的,目前我也就是介绍几种常见的,希望对大家有所帮助,对微信小程序有个全面的认识,不但知道了小程序能够做什么,还知道了小程序的入口有哪些,更是知道了小程序如何推广运营方法。希望能够帮助大家,今天就分享这里,谢谢大家

2024年微信小程序简单的例子 篇5

微信小程序没有火起来,最显著的原因是最开始推广的时候限定太死,只能够通过网友点对点发送,以及扫描线下二维码的方式来使用小程序。最开始的小程序甚至不能发到微信群里。小程序的入口也没有完善的搜索功能,连模糊搜索都没有,只能依靠全字匹配来搜。大量的小程序做出来之后,用户根本就不知道在哪里可以找到。小程序至今无法在朋友圈分享,这就极大地限制了它的传播。要知道过去很多“现象级”的APP都是通过朋友圈分享火起来的,比如“暴打神经猫”、“足记”,它们都是在朋友圈火爆之后才为人们所知的。

其次,微信对小程序功能限定的太死也是它火不起来的重要原因。由于是依托于微信自己的平台开发,小程序和普通的APP比起来有先天的不足。比如消息提醒功能的缺失,导致微信小程序和普通的HTML5网页比起来并没有太大的差别。最明显的例子就是今日头条,在今日头条APP中,用户可以根据自己的兴趣获得定制化的推荐内容。但是在微信小程序中的今日头条,只能机械化的提供固定的信息流,连头条问答也看不到,失去了个性化推荐这一重要的特色。由于小程序是基于微信的,但微信并非Android、iOS这样的操作系统,开发难度虽然不高,但想要把小程序做好也很困难。

第三,微信小程序本身错失了最佳的登场时期。根据张小龙的说法,微信小程序是在2016年1月9日立项,差不多一年的时间开发完毕。小程序有一个最主要的目的就是帮助用户释放手机的空间,实现不用安装也可以使用大部分APP功能的目的。在过去智能手机内存空间只有16GB甚至8GB的时代,小程序的这一特性可以说是非常受欢迎的。但是智能手机的发展速度日新月异,小程序问世之后,智能手机的起始存储空间已经从16GB翻了一倍到32GB,不少安卓手机的最低空间甚至达到64GB。这就使得手机用户对空间容量的需求并没有以前那么迫切,想要使用什么功能,直接安装对应的APP就可以了,没有必要使用功能不那么完全的小程序。再加上现在的手机流量越来越便宜,甚至有无限流量的手机卡出现,即使出门在外没有WiFi的环境下,用户也不会对几十兆的APP安装包斤斤计较。这就使得微信小程序失去了最大的优势。

最后也是最重要的一点,就是小程序开发者对腾讯的不信任。微信官方对于小程序的传播限制很高,小程序完全基于微信平台打造,也就是说腾讯对于小程序完全掌握了“生杀予夺”的大权。一款小程序做得再好,再火爆,如果触及了腾讯自身的利益,一句话就能把你拿下。最近有一个名叫“匿名聊聊”的小程序突然爆火,可以说是微信小程序推出130天来,传播速度最快的一款,短时间内就聚集了大量的用户,毫无疑问是小程序中的“爆款”。然而短短的5个小时之后,“匿名聊聊”就被彻底封杀,理由是“涉嫌诱导分享”。

且不说这个“涉嫌诱导分享”究竟属不属实,其实和“匿名聊聊”一样通过分享的方式来传播小程序并不少,比如大名鼎鼎的“摩拜单车”就经常用分享的方式来发骑行红包。但是摩拜单车做了那么久都没事,匿名聊聊短短五个小时就被封杀,怎么也看都有问题。要知道匿名聊聊是通过微信小程序的平台审核后上线的,就算真的有违规表现,修改之后再上架就是了,也用不着直接彻底封杀吧?最后还是业内人士分析的比较准确:“匿名聊聊”看名字就是一款社交应用,通过同样做社交的微信来传播,和虎口夺食有什么区别?微信不封你封谁?

虽然微信有很多理由来解释为什么要封杀“匿名聊聊”,但也让无数小程序的开发者看到了这样一个信号:在被人的地盘,就要遵守别人定下的规矩。至于规矩是可以随时修改的,如果对方想,分分钟就能把你封杀。这种情况并非微信小程序独有,实际上在国外像Facebook也出现过类似的情况。就连腾讯自己也在微信公众号赞赏的问题上,在iOS平台吃了苹果的瘪。真正有能力的开发者都不愿意受到平台的限制,如果一定要被限制,也会选择规则更加完善的微软、谷歌、苹果提供的平台,完全没有必要将生死绑在前途不明的小程序上!

2024年微信小程序简单的例子 篇6

刚刚好我在前段时间花费工作之余的几天从0开始开发了一个包括前后端+数据库的微信小程序。

下面我分享如何从0到1开发上线一个小程序。1.注册小程序

登录微信公众平台注册一个微信小程序,然后填写小程序基本信息,包括名称、头像、介绍及服务范围等,这些信息是你上线小程序的必要条件。2.下载微信开发者工具

在小程序配置的时候你可以看到AppID和AppSecret(小程序密钥),这两个很重要,是开发小程序必备品,在利用微信开发者工具进行小程序开发时需要利用AppID和AppSecret。

3.开发小程序

在微信公众平台中有小程序的开发文档,你先看下开发文档学习如何进行编程,熟悉小程序的目录结构,熟悉.js、.json、.wxml、.wxss文件的意义,知道什么代码写在什么位置。小程序开始本质上还是Web开发,根据开发文档你先写出前端的页面,有需要的可以说是html、css和js的知识,当然小程序标签跟html有区别,但也类似,小程序的<view>标签相当于html中的<div>标签,纯前端页面应该也是可以直接上线的。小程序开发文档 https://developers.weixin.qq.com/miniprogram/dev/

如果你要接入后端跟数据库,那么你就需要一台服务器,方便起见可以使用腾讯云提供的微信小程序服务器,可以与微信公众平台直接关联,操作会比自己配置服务器简单很多。不过腾讯云的小程序服务器只能默认大家PHP和Nodejs开发环境,如果你想用java写后端那么需要自己搭建环境。

微信开发团队为开发者提供的PHP和Nodejs的开发demo,方便起见你只需要在demo的基础上进行开发即可,开发之前你需要进行简单的配置,包括服务器地址、数据库用户名密码等的配置。下一步则是实现前后端数据的交互,例如利用PHP写好后端API接口后,前端页面利用js对API进行操作,之间利用json进行数据的传输。

4.提交审核上线

在微信开发者工具中可以将代码上传到生产环境中,注意要记得去腾讯云进行代码的部署,不然你上传的代码不起作用。一定记得点上传,这个时候你在微信公众平台可以看到提交的开发版本。

之后你可以提交审核,根据你选择的类型会花费不同的审核时间,审核遇到问题也会消息通知你。

审核完成就可以上线了,当当当当,如下图:

我是萌新程序猿,科技圈的事情欢迎邀请我来回答!

码了这么多字,点个赞关注下再走吧!!!

关注萌新程序猿(本人咯),跟小编一起从菜鸟成为大佬,了解更多IT以及程序猿的知识!!

2024年微信小程序简单的例子 篇7

一、关于微信小程序

微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装,用户扫一扫或搜一下即可打开的应用。

二、如何开发小程序?

1. 小程序注册

(1) 注册小程序帐号在微信公众平台官网首页点击右上角的“立即注册”按钮。

(2) 选择注册的帐号类型为“小程序”

(3) 填写邮箱和密码

(4) 激活邮箱登录邮箱,查收激活邮件,点击激活链接。

(5) 填写主体信息这里我们以独立开发者为例,填写对应的信息(企业和政府等其他类型的主体需准备更多的材料,如企业名称、营业执照号、企业对公账户信息等)。

(6) 确认主体信息

(7) 点击确认完成注册流程

2. 小程序信息完善及开发前准备

(1) 登录小程序管理平台

(2) 完善小程序信息完成注册后,需补充小程序名称信息,上传小程序头像,填写小程序介绍并选择服务范围(小程序发布前,可修改2次名称;发布后,个人帐号可一年内修改2次名称。服务类目一个月内可申请修改3次。小程序头像和介绍一个月内可申请修改5次)。

(3) 开发前准备

① 绑定开发者登录微信公众平台小程序,进入用户身份 - 成员管理 - 添加成员,使用管理员微信扫描二维码进行验证。在“添加用户”页面输入需要被添加成员的微信号,点击搜索按钮,勾选相应的权限后,点击“确认添加”按钮即可添加。

个人主体小程序最多可绑定5个开发者,10个体验者。未认证的组织类型小程序最多可绑定10个开发者,20个体验者已认证的小程序最多可绑定20个开发者,40个体验者。

② 获取AppID进入“设置-开发设置”,获取AppID信息。

3. 开发者工具的使用

① 下载并安装开发者工具

② 登录使用管理员或者绑定的开发者微信号扫码登录开发者工具。

③ 创建项目

④ 开发管理员和开发者可在开发者工具内完成小程序的开发、调试、预览、上传代码等操作(因为勾选了上一步中的“建立普通快速启动模板”选项,所以会自动生成下图中的代码)。

⑤ 预览点击工具栏中的“预览”按钮,用开发者本人微信扫码,即可在手机内预览小程序的效果(具有相应权限的开发者和管理员才可以扫描开发工具上的二维码并预览,其他人无法扫码预览)。

⑥ 上传代码点击工具栏上的“上传”按钮,填写“版本号”和“项目备注”,点击“上传”。上传成功后可在微信公众平台,开发管理页面中看到对应提交的版本。(只有管理员有权限可以上传,开发者没有权限上传)。

4. 代码审核与发布

① 提交审核在“开发管理”页面中,管理员可提交审核对应的“开发版本”小程序。

最后一步在商联网申请一个免费小程序系统即可开启你的电商之路

(支付宝+微信+百度+抖音+头条)五合一小程序就搭建成功了

猜你喜欢