2024年山东小程序网站制作 篇1
我有个菏泽老乡是专门做这个的，掌舵者传媒科技有限公司，你可以联系联系
2024年山东小程序网站制作 篇2
序：北漂做了几年的程序猿，英语水平极差，所以在程序上没有太高的造诣，但是还是想把自己所能做的的记录下来。
下边来完成一个微信小程序的车辆违章查询，在最后我会放上源码链接，所以内容上就不对代码做太多解释，只说下思想。
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年山东小程序网站制作 篇3
首先，对完整的功能进行服务划分和规划，梳理好到底哪些服务适合app哪些适合小程序、哪些适合网站，因为各个平台的受众群体不同，使用习惯方式不同，要考虑各个平台的适合展示的服务才放上面；
其次，要针对各个平台的服务得需求而规划各自需要的技术实现。必须小程序如果只是普通的信息展示那就是用比如api查询即可，但如果要求及时性高那就得用socket连接这样才能确保实时性，再比如app的开发着要考虑你的团队的技术水平、擅长的技术、新技术的学习速度等。抛开自己的因素，从技术本身看，如果要跨平台高效开发，目前建议flatter。网站则太简单了，vue就行了。
再次，服务器就用centos、mysql、go、xorm，nginx部署就足够了。
所以如何做后端统一管理呢，就是把上述需要的服务梳理完毕，再梳理后段需要控制的功能模块，梳理完毕直接用vue+go+xorm+mysql开发即可，非常容易上手。
2024年山东小程序网站制作 篇4
网站制作软件包括：
一、菜鸟级网页制作软件
如果你是一个网页制作初学者，那么让FrontPage带你走进那绚丽多彩的网页制作世界吧！
①Microsoft FrontPage
如果你曾对Word很熟悉，那么相信你用FrontPage进行网页设计一定会非常顺手。使用FrontPage制作网页，你能真正体会到“功能强大，简单易用”的含义。页面制作由FrontPage中的Editor完成，其工作窗口由3个标签页组成，分别是“所见即所得”的编辑页，HTML代码编辑页和预览页。FrontPage带有图形和GIF动画编辑器，支持CGI和CSS。向导和模板都能使初学者在编辑网页时感到更加方便。
小编注：虽然介绍是这样说，但是小编我从来没有用过这款软件，我是直接就学了DreamWeaver，下面看介绍。
二、中级网页制作软件
如果你对网页设计已经有了一定的基础，对HTML脚本语言又有一定的了解，那么DreamWeaver是你不二的选择。
①DreamWeaver
自制动态HTML动画的网页
DreamWeaver是一个很酷的网页设计软件，它包括可视化编辑、HTML代码编辑的软件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性，而且它还能通过拖拽从头到尾制作动态的HTML动画，支持动态HTML(Dynamic HTML)的设计，使得页面没有plug-in也能够在Netscape和IE 4.0浏览器中正确地显示页面的动画。同时它还提供了自动更新页面信息的功能。
DreamWeaver还采用了Roundtrip HTML技术。这项技术使得网页在DreamWeaver和HTML代码编辑器之间进行自由转换，HTML句法及结构不变。这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到可视化编辑带来的益处。DreamWeaver最具挑战性和生命力的是它的开放式设计，这项设计使任何人都可以轻易扩展它的功能。
~ 1 / 4 ~
小编注：对于初入门的人来说，这款软件还是有学的必要，以后对你制作div+css页面很有帮助，当时你必须结合学习以下三种脚本：html，css和javascript。因为这篇文章主要介绍软件，所以对脚本我就不多所，大家自己百度找教材看，比如搜索：html入门。
②Fireworks，第一款彻底为Web制作者们设计的图片处理软件。
Fireworks的来头实在不小，它的出现使Web作图发生了革命性的变化。Fireworks是专为网络图像设计而开发，内建丰富的支持网络出版功能，比如Fireworks能够自动切图、生成鼠标动态感应的javascript。而且Fireworks具有十分强大的动画功能和一个几乎完美的网络图像生成器(Export功能)。它增强了与dreamweaver的联系，可以直接生成dreamweaver的Libaray甚至能够导出为配合CSS式样的网页及图片！
小编注：处理网页图片必备，大家好好学习。
③Flash，让你的网页动起来
Flash是用在互联网上动态的、可互动的shockwave。它的优点是体积小，可边下载边播放，这样就避免了用户长时间的等待。可以用其生成动画，还可在网页中加入声音。这样你就能生成多媒体的图形和界面，而使文件的体积却很小。FLASH虽然不可以像一门语言一样进行编程，但用其内置的语句并结合JavaScripe，您也可做出互动性很强的主页来。有人曾经说过：下个世纪的网络设计人不会用FLASH，必将被淘汰出局！这句话在2012年之前应该说是对的，不过随着html5和css3技术的发展，加上智能手机基本都不支持flash了，所以Flash的光彩已经不如当年了，但是这不妨碍我们学习了解它。
小编注：做动画不是你会用软件就可以了，还需要有点创意才行，小编我就没有一点创意，所以现在做动画都是淘宝花几十元钱请人做。
三、高级网页制作软件
如果你要成为一个专业网站制作人员，那么有必须会一门网站开发语言，为什么呢？？我们发现没有，很多网站有留言功能，有会员注册，登陆等功能，这些功能可以保存用户的数据，资料，这就是通过编程技术实现的。网站主流编程语言有asp、php和asp.net,其中asp微软停止更新支持了，不建议学，php或asp.net是现在主流的编程语言，小编我学的是asp.net，当然php也很流行，大家可以自己百度了解一下这两个语言区别，挑一个来学习就可以了，不用两个都学，学好一个就够了。
~ 2 / 4 ~
为什么还要要有一个高级网页制作软件呢？比如我们开发asp.net，高手一般都是用计事本来编写，然后保存为aspx页面，但是对于新手来说，建议用一个编程软件，这些软件可以有很强的提示功能，比如你语法写错，会提示你，这样可以更好学习和提高，下面介绍开发asp.net软件。
①Microsoft Visual Studio
该系列的版本有：2003、2005、2008和未来的版本；是美国微软公司的开发工具包系列产品。 这款软件主要用来进行asp.net编程，就是制作aspx动态页面，可以让你在编写asp.net代码时候提高效率。
如果你要从事网站制作这个行业，上面说到的几款软件和脚本（html,css，javascript)，编程知识(php或asp.net)都必须去学习，尤其是脚本和编程必须学精。
但是...为什么又要说但是呢？因为我发现很多想做网站的朋友并不是想进入网站制作行业，只是给自己，或自己的公司做一个网站，如果为此你要花费1年半载去学习上面那么多东西，有点小题大做了，那不会上面这些软件，怎么做网站呢？下面举个例子。
比如A公司要做一个网站，会花钱请网络公司去做，做好后网络公司把网站上传到主机服务器上，然后提供一个后台地址，管理账户和密码给A公司的网站管理人员，网站管理人员可以登录这个后台去修改公司介绍，发布产品，发布一些新闻等等。
有人要问了，我是不是也要请网络公司给做一个网站呢？答案是No，我们可以去网上找一些现成的网站程序也来，这些网站程序实际就是一个制作好的网站，我们去下载下来上传到我们主机上，然后我们通过后台地址，账户和密码登陆后台去修改成我们自己的内容即可。
网站程序很多，但是真正能用的很少，小编这里介绍几款国内比较出名的网站程序给大家，根据你要制作的网站类型去选择，具体下载地址自己百度搜索就可以下载。
通用网站程序：适合做门户，学校，政府，企业这类网站，主要有下面三个。
~ 3 / 4 ~
1、PageAdmin系统 2、Drupal系统 3、Joomla! 系统
论坛程序：做论然用的，主要有下面2个
1、Discuz系统 2、Phpwind系统
商城程序：用来做在线购物网站
1、Ecshop 2、ShopEX
博客程序：用来做个人博客
1、Wordpress 2、BO-blog 3、P-blog
不同系统都针对不同类型的网站，用户下载下来后可以根据系统环境要求在本地配置环境来运行，本地不会配置的朋友也可以购买符合系统环境要求的虚拟主机上传到主机上安装，每种系统官方网站都会有详细的环境要求及使用教程，一般新手学习和熟悉一个系统功能大概要花费几天时间，熟悉功能后就可以很轻松的制作出自己需要的网站。
扩展阅读：
如何把做好的网站（或下载的程序）发布到互联网上
网站做好后我们需要发布到网上，然后通过域名任何人可以都访问，我们就需要做下面几步：
1、申请域名，就是注册一个网址（百度一下域名注册，选择一家你认为不错的注册就可以了。）
2、购买网站空间，有称为虚拟主机，用来放网站文件。（一般注册域名的公司都会同是提供网站空间服务）
购买好网站空间后就可以把你网站上传上去，这样其他人就可以通过域名来访问你的网站了，如果你不会上传不要紧张，让你空间服务商演示一下怎么上传，以后你就会明白了。
3、网站备案
国家要求国内任何一个网站必须进行工信部ICP备案，这个可以让你主机商给你代备案，一般都是免费的，你只需要提供资料给他们就可以。
做完上面步骤。别人就就可以通过域名来访问你的网站了，制作过程中会碰到各种各样的问题，不懂的地方可以百度找答案，或者咨询你的服务商，或者咨询你使用的网站系统的开发公司（这些系统一般都会有论坛提供交流协助），不要急于求成，当你学会这些后你会发现原来制作一个网站其实很简单。