2024年安徽微信小程序制作 篇1
序：北漂做了几年的程序猿，英语水平极差，所以在程序上没有太高的造诣，但是还是想把自己所能做的的记录下来。
下边来完成一个微信小程序的车辆违章查询，在最后我会放上源码链接，所以内容上就不对代码做太多解释，只说下思想。
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年安徽微信小程序制作 篇2
作为小程序的从业人员，为客户做了10来个小程序，对于小程序的各项成本比较了解，我以实际经验来回答这个问题。首先说一下，小程序的成本并不高。
一、小程序是新的热点
在互联网的江湖，每一年，都有新的热点和新的浪潮，今年的热点，一定是有小程序的。
大家都在关注小程序，很多的商家都想有自己的小程序，同时，又非常关心一个问题，就是小程序的成本问题。如果要上线一个小程序，到底要花多少钱了？
二、小程序的成本有哪些
从去年1月9日，小程序面市以来，也有一年多了，整体上来看，小程序目前也还是一个比较新鲜的事物。很多人对于小程序的感觉是，雷声大、雨点小。
到处都是小程序的会议、活动，也随处可见关于小程序的报道，但好像小程序在我们的工作和生活中还不是很常见，还没有那么重要。也就是说，小程序还比较新，是一个新鲜的事物。
作为刚刚面市不久的新鲜事物来说，要拥有它和使用它的成本，通常是比较高的。
由于小程序的普及程度还不够高，从业人员也还不是特别多，现在很多人对小程序都缺乏了解，所以，小程序目前的成本比5年前就出现的公众号，要高一些。
但是，随着小程序出现这一年多以来的不断普及，从业人员越来越多，市场在变大的同时竞争也在加剧，小程序的成本已经比2017年有了很大幅度的下降。
小程序会涉及到各种的成本，但按照我的经验，也是我给客户提供的方案，小程序的成本由三大类组成：
注册成本、开发成本和运营成本。
三、这些成本都有多高
这三大类的成本，都分别包含什么内容了？每一类，又大约是多少金额了？
注册成本
注册成本，指的就是小程序注册的时候所需要支付的成本。小程序注册的时候，需要进行认证，认证是由腾讯合作的第三方公司来具体开展。
需要向这些第三方公司支付300元的认证费用。如果我们小程序关联的公众号已经认证过了，那么，就不用交付这300元进行再次认证了。
开发成本
在显性成本上，开发成本是最主要的部分。
开发成本又因公司的需求和选择开发的模式不同，有很大的差别，价格从几千到几万不等。
一般来说，开发小程序可以有三种方式：企业自主开发、委托定制开发、模板搭建。
这三种方式的成本分别如下：
若是自主开发，开发成本主要是开发团队的人员工资，以及办公设备等成本。最低的投入都要三四万。
按照通常的薪资和工作量来看，产品经理600元/人/工作日*5个工作日 +UI设计师600元/人/工作日*5个工作日 +前端开发工程师800元/人/工作日*10个工作日 +后端开发工程师800元/人/工作日*15个工作日 +测试工程师500元/人/工作日*5个工作日=3000+3000+8000+12000+2500=28500元。
这还是自主开发最基本的成本，若公司对于小程序的需求特别复杂，开发成本和开发时间肯定还要上调。
委托定制开发的成本。委托给第三方公司开发小程序，每家能力不一，收费也不一。在委托定制开发方面，市场上的价格差异巨大，各种服务商的服务能力也是参差不齐，甚至鱼龙混杂。
这块服务的价格，从三五千，到几万都不等。
价格的差异，除了提供服务的机构收费标准不一样之外，还会取决于，你想要开发一个什么样的小程序，也就是小程序的功能复杂度。
功能复杂的小程序，自然开发成本就高了。比如，最简单来说，如果你只是想要一个官网版的小程序，进行企业品牌等的展示，那么，这样一个小程序只需要几千块；如果你想要一个又有交易功能，还有会员系统的小程序，开发成本一般都在万元以上了。
强烈建议，在以委托外部公司进行定制开发的时候，一定要选取靠谱的外部服务机构。
模板搭建的成本。若在第三方平台购买模板，自己搭建的话，同样功能的小程序，你要支付的资金成本可能是最低的，比前面两种方式都要低。但是，这种方式，需要公司的员工自己独立完成模板的选择、搭建等工作，搭建小程序这一流程最低也需要一个员工7个工作日，这也是成本。
而且，采用模板搭建的方式，看起来成本较低。但是，如果我们综合来看，其成本可能并不低，可能要付出很高的隐性成本。同时，对负责搭建的员工有较高的要求。需要员工非常清楚企业的需求，要非常清楚各种模板的功能。
运营成本
如果一个小程序，只是开发了出来，而不去运营它，即使这个小程序开发做得再怎么好，那这个小程序也是没什么用的。也就意味着之前的开发成本都会打了水漂！
小程序，一定要运营！
运营，就一定有运营的成本。
微信小程序后续的运营、推广成本相比较APP开发项目来说会少很多。基于微信这个庞大的生态系统诞生的小程序，可以很好的利用10亿的微信用户，其拓客的成本，要远远的低于APP。
小程序功能的不同，所需要的运营也就不同，那么，运营所产生的成本也就不一样。
比如，功能简单的企业资讯类的小程序，所需要的运营，通常是信息的更新，这样的运营成本主要是人工成本；如果是小程序商城，小程序建立的目的，是要进行商品销售的，那么这个小程序后续的运营成本就会高很多。
四、总结一下
再来总结一下，小程序是一定有成本的。小程序的成本相比去年，已经有了很大幅度的下降，随着小程序生态的进一步完善，我相信，小程序的各项成本还会下降的。
小程序的成本，包括三大类：注册成本、开发成本和运营成本。
而作为最主要的显性成本的开发成本，又因为开发方式的不一样，包括：企业自主开发的成本、委托外部开发的成本和模板搭建的成本。
我们一定要充分的认识到，如果我们想要充分的发挥小程序的作用，那么，小程序一定要运营起来！要运营！运营！
（作为小程序从业人员的春哥，在小程序、公众号等在内的微信营销方面，有着丰富的经验，欢迎大家关注我，加我为好友！也欢迎在点评、互动，或者砸砖！）
2024年安徽微信小程序制作 篇3
一、关于微信小程序
微信小程序，简称小程序，英文名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. 代码审核与发布
① 提交审核在“开发管理”页面中，管理员可提交审核对应的“开发版本”小程序。
最后一步在商联网申请一个免费小程序系统即可开启你的电商之路
（支付宝+微信+百度+抖音+头条）五合一小程序就搭建成功了