微信程序校里校外项目设计
学校 南京财学
学院 信息工程学院
专业 软件工程
班级 14级A1班
准考证号：014312401282
姓名***
指导教师***
目录
绪 1
() 项目背景 1
（二）微信程序项目开发流程简介 1
（三）微信程序简介 2
二开发工具相关技术简介 3
（）开发工具 3
（二）技术简介 3
三程序行性分析 4
（）技术行性 4
（二）济行性 4
（三）流量行性 4
四需求分析 5
（）程序前端需求 5
（二）台需求 5
五原型设计 6
（）程序前端原型设计 6
（二）台理原型设计 8
六程序UI设计 9
（）程序ＵＩ设计 9
（二）UI设计台 11
七实施 13
（）编码 13
（二）测试 14
（三）部署线 14
（四）运行维护 14
致谢 16
参考文献 17
微信程序校里校外项目设计
摘：校里校外款学生教育服务台校园服务台微信程序提供学生类培训机构优惠报名价格报名学生留评价渠道评价合约执行保证外校园坛功失物招领活动宣传表白墙匿名墙
关键词 微信程序学生服务台校园教育培训
绪
() 项目背景
二十世纪第三产业飞速发展时代中国加入WTO教育作服务业重组成部分年教育培训市场蓬勃发展已成服务行业热门市场已成资市场喜爱热门产业根国家相关部门统计中国教育培训市场未市场达千亿级
尤中学教育市场占市场30快速增长势头发展进入21世纪国济收入增加孩子教育支出占越越甚家庭中学时候考虑怂孩子出国留学目前国已2亿名中学生中型城市90名学生课接受种辅导庞需求群体市场
中国教育培训业刚刚兴起然教育培训机构10000家资金足10亿元教育培训业然市场尚未开发目前国家品牌教育机构新东方巨教育学教育等教育培训机构考研培训英语职业教育出国留学等占导位
中国职业教育刚刚兴起中国机构员工素质参差齐刚学毕业学生没感受行业洗礼勇敢站领奖台
（二）微信程序项目开发流程简介
API组件前端开发者提供行性评估
程序部分API组件均属前端范畴前端开发者告知产品理组件API实现什程度部分涉端技术API前端开发者解整前端逻辑端开发学起商量制作接口（例户鉴权接口）
开发模式转变前端架构首
程序相网页前端技术形态然体开发语言未发生变化然通编写javascript(w)xmlcss实现逻辑设计思路已发生改原部分网页前端逻辑面程式编程程序 HTML5 技术栈跑传统客户端开发模式限制javascript直接界面进行控制开发者通数驱动间接实现界面控制
前端开发者结合述两点进步进行技术预研输出成型demo推广产品侧引导结合实际业务进行需求立项需求立项功迭代中结合现API组件技术扩展性立项功设计逻辑提出建议
（三）微信程序简介
微信程序短程序缩写XCX英语迷程序种需载安装应程序实现触摸手梦想户扫描搜索开应程序体现逃跑思想户必担心安装太应程序
应处时需安装卸载
2017年1月9日午微信程序正式线张晓龙朋友圈中发布201719状态伴着新代iPhone发布图张晓龙种方式表达乔布斯敬意
微信程序定义种新应形式微信强调程序订阅号服务号企业号行系统
程序引入意味着WeChat想扮演应分发市场角色提供优质服务开放台方面型程序微聊天开发员现应程序起登录面户数会支持程序应程序直接跳转
型程序正式启动时户通二维代码搜索体验开发员开发程序
户WebCube更新新版体验程序发现页面程序选项卡WeChat会通方户推荐程序
该程序提供聊天顶部显示功意味着户程序程中快速返回聊天界面聊天界面快速进入程序实现方便切换程序聊天
Android版户桌面添加快捷方式程序
选股票程序APP功做出较保留放弃信息作独立板块保留选择市场设置三功部分APP提供股票提醒分享特定股票页面朋友点击查实时股价信息体验非常完整
先前微信团队提公连接功已反映前公号码页中
程序页体开发程序点击相应程序中相账户系统公号码监视器较低成转换较节目户
二开发工具相关技术简介
（）开发工具
常规代码式：技术团队公司开发程序时候会直接微信官方开发工具进行代码形式开发样开发出程序完全掌握开发公司手里出现问题第时间修改缺点成高需专业员适合刚刚创业公司
第三方程序开发工具：第三方开发工具种傻瓜式程序开发工具需专业编程员做程序做PPT样图片文字音乐等等东西插入然设置效果编辑类工具直接动程序代码生成程序代码传微信审核线程序
（二）技术简介
页面效果图绘制ps工作（果weui等通ui类库步工化）
门服务器端语言开发端接口
js程序接口调第3步创建端接口加调程序接口缝合调试线测试
三程序行性分析
年着国移动互联网快速发展 手机APP已普领域日趋饱微信程序种情况微信推送出微信程序市迅速发展搜完走深户喜爱
（）技术行性
基程序学生校园服务台关键技术户交互数理学生快速找想找相关信息已消费学生评价学生学生信息保护第三方开发台开发户交互UI设计
（二）济行性
般程序开发周期13月需专业技术员成较高时间较长第三方开发台开发需专业程序开发员需UI设计时间缩短成降低刚刚创业学生说非常利
（三）流量行性
背微信流量户微信程序少量微信流量微信程序较顾非常引流
四需求分析
微信程序理念完走需载网页微信提供类浏览器环境户扫扫搜开应
（）程序前端需求
搜索开程序点击搜索框输入想搜索东西然点击确定搜想找东西
信息轮播开程序第图片轮播信息台天设置广告图片信息点击图片会跳相关商品详情页
资讯开程序点击资讯会跳资讯页面页面新校园信息次5条十分钟更新次
教育类目开程序会页面中间部分罗列出培训项目方便学生点击查教育类目点击相关项目跳转详情页
底部导航开程序页面底部点击会导航相关详情页
互动专区开程序点击互动专区会信息交流探讨实事评方便学生进行讨
商品详情页开程序商品列表中点击商品图片会跳商品详情页商品具体情况期出现退款问题解决方法买家预约直接购买报名前购买学生留匿名评价前买家询问商品具体情况消息通知
订单页开程序点击订单页买家前预约购买商品否付款否发货价格
订单种情况付款消费评价消息通知户具体情况
址户城市定位具体学校定位
（二）台需求
具体订单情况退款量预约量报名量买家具体信息浏览量商品详情聊天页面
五原型设计
程序价值者众方户第眼感觉需程序交互体验非常重程序东西直接展示户次辅助功户狐妖时候第时间找次分明
相招聘类产品职鲨产品特色潜力中企业挖掘出时基LBS定位推荐周边企业1设计中知名团队知名风投期融资等标签隐蔽户需摸索注意改版2中户感兴趣标签做级入口重点强调
工具效率已数更加结构化处理提供建议减少筛选职鲨需断迭代方
页面层级扁化跳转减少跳转跳转新页面会增加户适应新页面元素成时程序页面层级会户感觉繁琐焦虑
减少输入输入减少输入点选拖动等手势操作代文字输入热门常历史信息前置减少户重复劳动
长表单处理表单容长会户心理排斥增加放弃率设计长表单时减厌倦变化设计样式（）区块分割清晰减少跳转操作代输入
（）程序前端原型设计
程序前端功原型设计模块重截图
图1首页截图 图2考研详情截图
图3校园服务详情页截图 图4页面截图
（二）台理原型设计
图5台理截图
六程序UI设计
界面设计年刚刚兴起行业目前尚成熟市面没专门做界面设计专业软件年界面设计已越越软件开发公司软件开发高度重视绝数设计者PhotoshopAI(Adobe Illustrator 款矢量图编辑软件)CDR(coreldraw款矢量图形制作工具)
现然出种ps竞争手产品例sketch等软件ps始终行软件AI矢量代表做适量图AE制做动效C4D三维软件运营图海报设计越越样软件属加分项PS核心软件
界面设计 (Interface Design)机器间信息传递交换信息媒介计算机科学心理学设计艺术学认知科学机工程学交叉研究领域世界知名机界面专业家Jef Raskin[ 杰夫 拉斯金(Jef Raskin1943年3月9日 2005年2月26日)位美国机界面专家着名20世纪70年代末苹果设计启动Macintosh项目]言界面种产品完成务方式
界面设计纸制作软件界面包括软件界面 logoicon(图标)钮配图运营banner(横幅广告者通栏广告)动画效果标注切图等整套设计
（）程序ＵＩ设计
UI设计师程序功原型设计进行程序高保真界面设计程序四模块UI设计截图：
图6首页UI设计 图7考研详情页面UI设计
图8UI设计 图9校园服务UI设计
（二）UI设计台
台程序开发工具理工具
图10台UI设计截图
七实施
（）编码
程序代码JavaScript编写JavaScript种基web解释运行轻量级网络脚语言已广泛Web应开发通常HTML页面添加种样特效功户提供更加流畅美观操作效果通常JavaScript语言嵌入HTML页面中者写成单独js文件加载HTML页面中实现丰富功
JavaScript语言四特点
1解释性执行方式(代码需预编译执行)
2面HTML(标准通标记语言应)页面添加动态交互效果
3嵌入HTML页面中实现结构行样式相分离般会写单独js文件中
4跨台性台支持js解释引擎javascript该台中运行流操作系统运行(WindowsLinuxMacAndroidiOS等)
部分程序代码
var WxParse require('componentswxParsewxParsejs')
var util require('utilsutiljs')
App({
onLaunch function () {
let userInfo
if (userInfo wxgetStorageSync('userInfo')) {
thisglobalDatauserInfo userInfo
}
thisappInitial()
}
appInitial function () {
let that this
this_getSystemInfo({
success function (res) {
thatsetSystemInfoData(res)
}
})
'httpcdnjisuappcnzhichi_frontendstaticwebappimagesdefault_photopng'
siteBaseUrl 'httpsxcxzhichiweiyecom'
appTitle '校里校外'
appDescription '整合学生教育培训出国留学学生泛台'
appLogo 'httpimgzhichiwangluocomzcimgdirthumbt_15233444635acc644f4b5a0jpg'
}
})
（二）测试
软件测试定义软件测试（软件测试）软件生命周期（软件生命周期）中重阶段软件质量保证关键步骤般说软件测试软件需求分析设计规范编码软件投入运行前审查IEEE 1983提出软件工程术语中软件测试定义：工动手段运行确定软件系统程目测试软件系统否满足需求清差异定义清楚说明软件测试目测试软件系统否满足需
户角度通常希软件测试会暴露软件中隐藏错误缺陷软件测试应该执行程序发现错误者软件测试应该仔细设计批测试例（I）NPIT数预期输出结果基软件开发阶段规范部结构测试例运行程序查找程序错误缺陷
（三）部署线
程序开发台编辑UI页面保存代码传微信台微信台审核绑定微信公众号编辑微信类目提交ICP备案信息微信官方审核完成线
（四） 运行维护
生产线传成功代码包中代码建立分支标签分支中市场反馈客户求项目进行BUG修复功优化
致谢
文完成际谨予指导关心帮助老师学朋友公司事表示衷心感谢
次设计中日帮助指导尤文指导老师 ——丁元明老师整毕业设计程中丁老师细心帮助指导够工作余利完成毕业设计掌握许程序设计细节问题通校里校外项目终完成微信程序更深理解项目前期功设计中需求设计中设计中药学生角度设想项目中期团队头脑风暴想否更功期UI进行修改便达学生更交互体验
项目中通h5cssJavaScript学运JavaScript框架学更前端语言更深解
通项目锻炼更加微信程序开发开发方起重影响
参考文献
[1]张龙张龙全面阐述程序[R]互联网演讲2016
[2]李智慧型网站技术架构[M]电子工业出版社2013
[3]王晓民识互联网[J]软件信息服务2014
[4]李洋洋2014中国APP价值[J]互联网周刊2014
[5]高洪涛零开始学微信程序开发[M]电子工业出版社2017
[6]ERIC BUTOW户界面设计指南[M]机械工业出版社2008
[7]张新华软件测试概述[J]科技视界2012
[8]龙滢冰浅谈基户体验APP界面设计[J]互联网周刊2013
[9]刘东明中国教育培训业2012发展趋势[J]科技智囊2012
[10]孙彤基ASPNET技术网站开发设计技术分析[J]科技展2015
文档香网(httpswwwxiangdangnet)户传
《香当网》用户分享的内容，不代表《香当网》观点或立场，请自行判断内容的真实性和可靠性！
该内容是文档的文本内容，更好的格式请下载文档
学校 南京财学
学院 信息工程学院
专业 软件工程
班级 14级A1班
准考证号：014312401282
姓名***
指导教师***
目录
绪 1
() 项目背景 1
（二）微信程序项目开发流程简介 1
（三）微信程序简介 2
二开发工具相关技术简介 3
（）开发工具 3
（二）技术简介 3
三程序行性分析 4
（）技术行性 4
（二）济行性 4
（三）流量行性 4
四需求分析 5
（）程序前端需求 5
（二）台需求 5
五原型设计 6
（）程序前端原型设计 6
（二）台理原型设计 8
六程序UI设计 9
（）程序ＵＩ设计 9
（二）UI设计台 11
七实施 13
（）编码 13
（二）测试 14
（三）部署线 14
（四）运行维护 14
致谢 16
参考文献 17
微信程序校里校外项目设计
摘：校里校外款学生教育服务台校园服务台微信程序提供学生类培训机构优惠报名价格报名学生留评价渠道评价合约执行保证外校园坛功失物招领活动宣传表白墙匿名墙
关键词 微信程序学生服务台校园教育培训
绪
() 项目背景
二十世纪第三产业飞速发展时代中国加入WTO教育作服务业重组成部分年教育培训市场蓬勃发展已成服务行业热门市场已成资市场喜爱热门产业根国家相关部门统计中国教育培训市场未市场达千亿级
尤中学教育市场占市场30快速增长势头发展进入21世纪国济收入增加孩子教育支出占越越甚家庭中学时候考虑怂孩子出国留学目前国已2亿名中学生中型城市90名学生课接受种辅导庞需求群体市场
中国教育培训业刚刚兴起然教育培训机构10000家资金足10亿元教育培训业然市场尚未开发目前国家品牌教育机构新东方巨教育学教育等教育培训机构考研培训英语职业教育出国留学等占导位
中国职业教育刚刚兴起中国机构员工素质参差齐刚学毕业学生没感受行业洗礼勇敢站领奖台
（二）微信程序项目开发流程简介
API组件前端开发者提供行性评估
程序部分API组件均属前端范畴前端开发者告知产品理组件API实现什程度部分涉端技术API前端开发者解整前端逻辑端开发学起商量制作接口（例户鉴权接口）
开发模式转变前端架构首
程序相网页前端技术形态然体开发语言未发生变化然通编写javascript(w)xmlcss实现逻辑设计思路已发生改原部分网页前端逻辑面程式编程程序 HTML5 技术栈跑传统客户端开发模式限制javascript直接界面进行控制开发者通数驱动间接实现界面控制
前端开发者结合述两点进步进行技术预研输出成型demo推广产品侧引导结合实际业务进行需求立项需求立项功迭代中结合现API组件技术扩展性立项功设计逻辑提出建议
（三）微信程序简介
微信程序短程序缩写XCX英语迷程序种需载安装应程序实现触摸手梦想户扫描搜索开应程序体现逃跑思想户必担心安装太应程序
应处时需安装卸载
2017年1月9日午微信程序正式线张晓龙朋友圈中发布201719状态伴着新代iPhone发布图张晓龙种方式表达乔布斯敬意
微信程序定义种新应形式微信强调程序订阅号服务号企业号行系统
程序引入意味着WeChat想扮演应分发市场角色提供优质服务开放台方面型程序微聊天开发员现应程序起登录面户数会支持程序应程序直接跳转
型程序正式启动时户通二维代码搜索体验开发员开发程序
户WebCube更新新版体验程序发现页面程序选项卡WeChat会通方户推荐程序
该程序提供聊天顶部显示功意味着户程序程中快速返回聊天界面聊天界面快速进入程序实现方便切换程序聊天
Android版户桌面添加快捷方式程序
选股票程序APP功做出较保留放弃信息作独立板块保留选择市场设置三功部分APP提供股票提醒分享特定股票页面朋友点击查实时股价信息体验非常完整
先前微信团队提公连接功已反映前公号码页中
程序页体开发程序点击相应程序中相账户系统公号码监视器较低成转换较节目户
二开发工具相关技术简介
（）开发工具
常规代码式：技术团队公司开发程序时候会直接微信官方开发工具进行代码形式开发样开发出程序完全掌握开发公司手里出现问题第时间修改缺点成高需专业员适合刚刚创业公司
第三方程序开发工具：第三方开发工具种傻瓜式程序开发工具需专业编程员做程序做PPT样图片文字音乐等等东西插入然设置效果编辑类工具直接动程序代码生成程序代码传微信审核线程序
（二）技术简介
页面效果图绘制ps工作（果weui等通ui类库步工化）
门服务器端语言开发端接口
js程序接口调第3步创建端接口加调程序接口缝合调试线测试
三程序行性分析
年着国移动互联网快速发展 手机APP已普领域日趋饱微信程序种情况微信推送出微信程序市迅速发展搜完走深户喜爱
（）技术行性
基程序学生校园服务台关键技术户交互数理学生快速找想找相关信息已消费学生评价学生学生信息保护第三方开发台开发户交互UI设计
（二）济行性
般程序开发周期13月需专业技术员成较高时间较长第三方开发台开发需专业程序开发员需UI设计时间缩短成降低刚刚创业学生说非常利
（三）流量行性
背微信流量户微信程序少量微信流量微信程序较顾非常引流
四需求分析
微信程序理念完走需载网页微信提供类浏览器环境户扫扫搜开应
（）程序前端需求
搜索开程序点击搜索框输入想搜索东西然点击确定搜想找东西
信息轮播开程序第图片轮播信息台天设置广告图片信息点击图片会跳相关商品详情页
资讯开程序点击资讯会跳资讯页面页面新校园信息次5条十分钟更新次
教育类目开程序会页面中间部分罗列出培训项目方便学生点击查教育类目点击相关项目跳转详情页
底部导航开程序页面底部点击会导航相关详情页
互动专区开程序点击互动专区会信息交流探讨实事评方便学生进行讨
商品详情页开程序商品列表中点击商品图片会跳商品详情页商品具体情况期出现退款问题解决方法买家预约直接购买报名前购买学生留匿名评价前买家询问商品具体情况消息通知
订单页开程序点击订单页买家前预约购买商品否付款否发货价格
订单种情况付款消费评价消息通知户具体情况
址户城市定位具体学校定位
（二）台需求
具体订单情况退款量预约量报名量买家具体信息浏览量商品详情聊天页面
五原型设计
程序价值者众方户第眼感觉需程序交互体验非常重程序东西直接展示户次辅助功户狐妖时候第时间找次分明
相招聘类产品职鲨产品特色潜力中企业挖掘出时基LBS定位推荐周边企业1设计中知名团队知名风投期融资等标签隐蔽户需摸索注意改版2中户感兴趣标签做级入口重点强调
工具效率已数更加结构化处理提供建议减少筛选职鲨需断迭代方
页面层级扁化跳转减少跳转跳转新页面会增加户适应新页面元素成时程序页面层级会户感觉繁琐焦虑
减少输入输入减少输入点选拖动等手势操作代文字输入热门常历史信息前置减少户重复劳动
长表单处理表单容长会户心理排斥增加放弃率设计长表单时减厌倦变化设计样式（）区块分割清晰减少跳转操作代输入
（）程序前端原型设计
程序前端功原型设计模块重截图
图1首页截图 图2考研详情截图
图3校园服务详情页截图 图4页面截图
（二）台理原型设计
图5台理截图
六程序UI设计
界面设计年刚刚兴起行业目前尚成熟市面没专门做界面设计专业软件年界面设计已越越软件开发公司软件开发高度重视绝数设计者PhotoshopAI(Adobe Illustrator 款矢量图编辑软件)CDR(coreldraw款矢量图形制作工具)
现然出种ps竞争手产品例sketch等软件ps始终行软件AI矢量代表做适量图AE制做动效C4D三维软件运营图海报设计越越样软件属加分项PS核心软件
界面设计 (Interface Design)机器间信息传递交换信息媒介计算机科学心理学设计艺术学认知科学机工程学交叉研究领域世界知名机界面专业家Jef Raskin[ 杰夫 拉斯金(Jef Raskin1943年3月9日 2005年2月26日)位美国机界面专家着名20世纪70年代末苹果设计启动Macintosh项目]言界面种产品完成务方式
界面设计纸制作软件界面包括软件界面 logoicon(图标)钮配图运营banner(横幅广告者通栏广告)动画效果标注切图等整套设计
（）程序ＵＩ设计
UI设计师程序功原型设计进行程序高保真界面设计程序四模块UI设计截图：
图6首页UI设计 图7考研详情页面UI设计
图8UI设计 图9校园服务UI设计
（二）UI设计台
台程序开发工具理工具
图10台UI设计截图
七实施
（）编码
程序代码JavaScript编写JavaScript种基web解释运行轻量级网络脚语言已广泛Web应开发通常HTML页面添加种样特效功户提供更加流畅美观操作效果通常JavaScript语言嵌入HTML页面中者写成单独js文件加载HTML页面中实现丰富功
JavaScript语言四特点
1解释性执行方式(代码需预编译执行)
2面HTML(标准通标记语言应)页面添加动态交互效果
3嵌入HTML页面中实现结构行样式相分离般会写单独js文件中
4跨台性台支持js解释引擎javascript该台中运行流操作系统运行(WindowsLinuxMacAndroidiOS等)
部分程序代码
var WxParse require('componentswxParsewxParsejs')
var util require('utilsutiljs')
App({
onLaunch function () {
let userInfo
if (userInfo wxgetStorageSync('userInfo')) {
thisglobalDatauserInfo userInfo
}
thisappInitial()
}
appInitial function () {
let that this
this_getSystemInfo({
success function (res) {
thatsetSystemInfoData(res)
}
})
'httpcdnjisuappcnzhichi_frontendstaticwebappimagesdefault_photopng'
siteBaseUrl 'httpsxcxzhichiweiyecom'
appTitle '校里校外'
appDescription '整合学生教育培训出国留学学生泛台'
appLogo 'httpimgzhichiwangluocomzcimgdirthumbt_15233444635acc644f4b5a0jpg'
}
})
（二）测试
软件测试定义软件测试（软件测试）软件生命周期（软件生命周期）中重阶段软件质量保证关键步骤般说软件测试软件需求分析设计规范编码软件投入运行前审查IEEE 1983提出软件工程术语中软件测试定义：工动手段运行确定软件系统程目测试软件系统否满足需求清差异定义清楚说明软件测试目测试软件系统否满足需
户角度通常希软件测试会暴露软件中隐藏错误缺陷软件测试应该执行程序发现错误者软件测试应该仔细设计批测试例（I）NPIT数预期输出结果基软件开发阶段规范部结构测试例运行程序查找程序错误缺陷
（三）部署线
程序开发台编辑UI页面保存代码传微信台微信台审核绑定微信公众号编辑微信类目提交ICP备案信息微信官方审核完成线
（四） 运行维护
生产线传成功代码包中代码建立分支标签分支中市场反馈客户求项目进行BUG修复功优化
致谢
文完成际谨予指导关心帮助老师学朋友公司事表示衷心感谢
次设计中日帮助指导尤文指导老师 ——丁元明老师整毕业设计程中丁老师细心帮助指导够工作余利完成毕业设计掌握许程序设计细节问题通校里校外项目终完成微信程序更深理解项目前期功设计中需求设计中设计中药学生角度设想项目中期团队头脑风暴想否更功期UI进行修改便达学生更交互体验
项目中通h5cssJavaScript学运JavaScript框架学更前端语言更深解
通项目锻炼更加微信程序开发开发方起重影响
参考文献
[1]张龙张龙全面阐述程序[R]互联网演讲2016
[2]李智慧型网站技术架构[M]电子工业出版社2013
[3]王晓民识互联网[J]软件信息服务2014
[4]李洋洋2014中国APP价值[J]互联网周刊2014
[5]高洪涛零开始学微信程序开发[M]电子工业出版社2017
[6]ERIC BUTOW户界面设计指南[M]机械工业出版社2008
[7]张新华软件测试概述[J]科技视界2012
[8]龙滢冰浅谈基户体验APP界面设计[J]互联网周刊2013
[9]刘东明中国教育培训业2012发展趋势[J]科技智囊2012
[10]孙彤基ASPNET技术网站开发设计技术分析[J]科技展2015
文档香网(httpswwwxiangdangnet)户传
《香当网》用户分享的内容，不代表《香当网》观点或立场，请自行判断内容的真实性和可靠性！
该内容是文档的文本内容，更好的格式请下载文档