微信小程序之微票前后端简易版+五天实训总结-即速应用

本文为本人原创，如需转载请注明出处！

为期五天的实训结束了，其实算起来除去机房被占用顶多四天多一点。

来给我们做培训的是优才学院（没有打广告的意思，本着实事求是的态度），老师很有耐心，确实学到很多东西。

今天刚结束我想趁热打铁赶紧写一份总结，近两天总结完（明天考两门考研大科我怎能安心更博客啊！）。

（代码都是自己照着老师的敲的依照个人喜好略有改动，数据库是老师给的，如果有侵权的地方，请联系我，我将立即删掉。）

简单记录一下五天的内容重要的是做一个微票的微信小程序。

微信小程序4月份的时候我研究过，还买了本书（建议不要买书，这个东西改朝换代很快的，而且不像java那么难学），每次登陆开发者工具都有更新，还有更新日志，发展很迅猛。主要是轻量级的，简易方便。打算暑假做比赛有余力就再写个小程序（上一届比赛肯定是没有这个东西的）。虽然学过，但经过老师一讲，果然！自己看书跟有老师带着就是不一样！！

第一天下午+第二天上午飞机大战游戏截图如下

小程序

不是特别难，重要的是理清逻辑。

编译器是eclipse jdk8

第二天下午数据库等基本操作不做详细记录但作为后期基础

第三天 json的生成此处详细记录，后期的基础

1、

首先创建项目导入gson包 https://pan.baidu.com/s/1c2GiCRQ百度云

和mysql-connector包http://pan.baidu.com/s/1nvlyklV

配置文件（右击项目 buil path add jars）

三个sql文件wp，wp_image， wp_cinema http://pan.baidu.com/s/1pLylqFx导入到数据库中

创建这几个包 bean：实体类 biz：控制层也就是业务逻辑层

Dao：访问数据库的方法 servlet：服务器 util：数据库工具小程序

2、在bean里创建一个WeiPiao的实体类，代码不做展示，照着数据库表的写出成员，其他的构造和getset一键生成。不要把id放到构造函数里！总之不要让id参与进来否则会很麻烦

a.先搞数据库（无论是什么项目，先把数据库搞通）properties那里边：

　　　　jdbcDriver = com.mysql.jdbc.Driver

　　　　jdbcUrl = jdbc:mysql://localhost:3306/你的数据库名?user=你的数据库用户名&password=密码

b.util里创建PropertiesUtil类，以下只写类里的方法和必要的成员变量

　public static String getValue(String key,String proName){    　　   String value = null;     　　  Properties p = new Properties();      　　 String path = PropertiesUtil.class.getResource("/").getPath();    　　   try {           p.load(new FileInputStream(new File(path,proName)));           value = p.getProperty(key);       } catch (FileNotFoundException e) {           e.printStackTrace();       } catch (IOException e) {           e.printStackTrace();       }       return value;    }

和DBUtil类

public static Connection getConn(){       Connection conn  =null;       try {           Class.forName("com.mysql.jdbc.Driver");              conn =                  DriverManager.getConnection("jdbc:mysql://localhost:3306/test?user=root&password=123456");       } catch (Exception e) {           e.printStackTrace();       }       return conn;    }       public static void closeAll(Connection conn,PreparedStatement ps,ResultSet rs){       try {           if (rs!=null) {              rs.close();           }       } catch (SQLException e) {           e.printStackTrace();       }       try {           if (ps!=null) {              ps.close();           }       } catch (SQLException e) {           e.printStackTrace();       }       try {           if (conn!=null) {              conn.close();           }       } catch (SQLException e) {           e.printStackTrace();       }    }

dao包里创建一个InfoDao接口和InfoDaoImpl实现类

就一个方法：

public ListWeiPiao getAll()Connection conn=null;       PreparedStatement ps=null;       ResultSet rs=null;       ListWeiPiao list = new ArrayListWeiPiao();             try {           conn=(Connection) DBUtils.getConn();           ps=conn.prepareStatement("select * from wp");           rs=ps.executeQuery();                     //遍历结果对象，获取对应字段的数据           while(rs.next()){              String image=rs.getString("image");              String title = rs.getString("title");              String subTitle = rs.getString("subTitle");              String actor=rs.getString("actor");              String score=rs.getString("score");              String action=rs.getString("action");              //声明weipiao对象，并且传入每个字段的数据              WeiPiao weiPiao = new WeiPiao(image, title, subTitle, actor, score, action);              //将对象添加到集合里              list.add(weiPiao);                        }       } catch (SQLException e) {           // TODO Auto-generated catch block           e.printStackTrace();       }       finally {           DBUtils.closeAll(conn, ps, rs);       }       return list;

这个包里主要做的工作就是把数据库里wp表的内容读出来。

d.biz里也就两个：InfoBiz接口和InfoBizImpl实现类

private InfoDao dao = new InfoDaoImpl();    @Override    public String getInfo(String type) {       /*        * 拿到参数        * 1、如果参数是wp，获取全部的影片信息        */       //声明集合       ListWeiPiao list=new ArrayListWeiPiao();       ListWeiPiaoImage list2=new ArrayListWeiPiaoImage();       ListCinema list3=new ArrayListCinema();       if("wp".equals(type)){//wp在前，避免空指针异常           list=dao.getAll();           String json=wpToJson(list);           return json;       }       else if("wp_image".equals(type)){           list2=dao.getAllimage();           String json=wpiToJson(list2);           return json;       }       else if("cinema".equals(type)){           list3=dao.getAllCinema();           String json=wpcToJson(list3);           return json;       }       return "参数写错";    }    //将集合写成json数据并且返回    public String wpToJson(ListWeiPiao list){       //声明一个root对象       Root root = new Root();       //将集合放入到root对象中       root.setResult(list);       //使用gson,将root写成json数据       Gson gson = new Gson();       String json =gson.toJson(root);          return json;    } 　　这个包做的事情就是把都出来数据库里边的数据生成json数据e.servlet包里建一个servlet ：GetInfo@WebServlet("/GetInfo")public class GetInfo extends HttpServlet {    private static final long serialVersionUID = 1L;    private InfoBiz biz = new InfoBizImpl();    public GetInfo() {           }    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {       /*        * 1、接收用户的请求数据        * 2、根据要求从数据库中获取数据        * 3、将取出来的数据封装成对象，并写成json字符串        * 4、将json数据写入到客户端        */       //设置返回数据的编码格式       response.setContentType("text/html;charset=utf-8");       //获取请求的参数，交给业务层处理       String type=request.getParameter("type");       //获取业务层返回的json数据       String json=biz.getInfo(type);       //将json数据写在页面       response.getWriter().println(json);    }    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {       doGet(request, response);    } }

用doget方法！！方便选择不同的数据表！

f.运行：右击项目 run as 第一个地址栏加入参数：GetInfo?type=wp//传参造么？然后就会出现：小程序

这就是json！！天啦好神奇！！！不好看是吧？百度be json格式化一下！这个就是我们接下来需要的json数据。

当然还有image cinema，都是照葫芦画瓢的，也就是说，我们可以生成三个json的。

走完这一步，因为我是紧跟老师步伐，所以没有什么报错，但是通过给同学改程序，基本有以下几个错误：

①-数据库部分走不动：可能是properties写的不对，也可能mysql-connector放到lib包里了但是没有配置好，还有可能sql语言写错了。建议：单独把数据库部分拿出来跑，调通后放回去，没毛病。

②-@这个符号所在的一行报错：是没有配置jdk吧？或者jdk版本/tomcat版本过低，jdk1.6以下的请换更高版本，毕竟向下兼容，高了不吃亏。建议：build path 看看，该换换，一般就是这种原因。

③-乱码：数据库有的视图化工具导入表时有选择编码项一定要注意，还有工程本身也有编码，编码不一致才会乱码。建议：重新导表utf8编码，右击项目-- properties---resourse里边改编码。

④-代码怎么看都没错但就是提示各种各样奇怪的错误：李同学经典做法，报错从后往前调，以每个错误为一个结点，输出信息或者其他方式调试程序（不愧是做ACM的），总比干瞪眼好。实在不行重新创建一个项目把原来的代码粘贴进去。

/(ㄒoㄒ)/~~忍痛离开

----------------------暂更，跑开去复习---------------------------------------------------------------------------------------------------------------------------------------------------------6.23

6.24 继续

艾玛终于考完了两门大科，行了不吐槽了，血槽空了，来我们继续。

第四天微信小程序之布局演示、从本地获取视频播放（最后来记录）

第五天微信小程序之(#`O′微票先展示一下老师做的：不一样大就不一样大吧。。。

但如果按照下边的来做，将会看到以下

小程序样式可以改，改成自己喜欢的都可以。

上面已经生成了json。

现在来写前端。首先，有一个微信小程序开发者工具、还要有一个开发者账号，操作步骤在微信公众号平台都有。域名什么的，买一个就好。

pages里创建三个文件夹 home cinema my

　　　　app.json里边：

{  "pages":[    "pages/home/index",    "pages/cinema/index",    "pages/logs/logs",       "pages/my/index"  ],  "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "微票",    "navigationBarTextStyle":"black"  },"tabBar": { "selectedColor": "#3cc51f",  "list": [{    "pagePath": "pages/home/index",    "text": "上映",    "iconPath": "image/icon_normal.png",    "selectedIconPath": "image/icon_pressed.png"  },      {        "pagePath": "pages/cinema/index",        "text": "影院",        "iconPath": "image/icon_normal.png",        "selectedIconPath": "image/icon_pressed.png"        },    {      "pagePath": "pages/my/index",      "text": "我的",      "iconPath": "image/icon_normal.png",      "selectedIconPath": "image/icon_pressed.png"    }  ]}}

　　home/index.js

//home/index.js//获取应用实例var app = getApp()//初始化数据Page({  data: {  }, //生命周期函数，页面加载时调用  onLoad: function () {   var that=this   //获取轮播图数据   wx.request({     url: 'https://www.****/WeiPiao/GetInfo?type=image',     data:{},     method:'GET',     //设置请求     header:{       "Accept":"application-json"     },     success:function(res){       console.log(res);       var data=res.data.images;       console.log(data);       //解析到数组，设置数据给页面       that.setData({          image:data       })     }   }),   //获取接口请求信息   wx.request({     //修改1     url: 'https://www.****/WeiPiao/GetInfo?type=wp',     data: {},     method: 'GET',     //设置请求     header: {       "Accept": "application-json"     },     success: function (res) {       console.log(res);       //修改2       var data = res.data.result;       console.log(data);       //解析到数组，设置数据给页面       that.setData(         //修改三         {         items: data       })     }   })  }})

　　home/index.wxml

!--index.wxml--view class="container"!--indicator-dots="true"显示面板指示点--!--autoplay="true" 自动轮播--!--interval="3000"自动轮播的时间间隔--!--duration="1000"滑动动画时长--swiper class="swiper_box" indicator-dots="true" autoplay="true" interval="3000" duration="1000"!--swiper-item滑动视图的每一项--!--wx:for 绑定一个数组，即可使用数组中各项的数据重复渲染该组件--!--wx:for-item 子元素，相当于数组中的每一项--swiper-item wx:for="{{image}}" wx:for-item="item"image src="{{item.images}}" class="slide_image"/image/swiper-item/swiper!--2--view class="text"view class="line_flag"/viewview class="text_content"正在上映/view/view!--3--view wx:for="{{items}}" wx:for-item="item"view class="item"!--左边部分--view class="item_left"            image src="{{item.image}}"/image/view!--中间--view class="item_middle"!--影片名--   view    text class="title" {{item.title}} /text   /view   !--影片简介--    view    text class="sub_title" {{item.subTitle}} /text   /view   !--演员--    view    text class="actor" {{item.actor}} /text   /view    /view!--右边--    view class="item_right"    !--评分--     view    text class="score" {{item.score}} /text   /view   !--购票方式--     view    text class="action" {{item.action}} /text   /view   /view/view/view/view

　　wxss 样式表里自己可以随意改，按照自己的风格来。css具体样式w3school都有。

/**index.wxss**/.container{  background-color: #f2f2f2;}.swiper_box{    width:100%;    height:200px;}.slide_image{    width:100%;    height:200px;    display:inline-block;    overflow:hidden;}/*第二部分样式*/.text{  display:flex;  width: 100%;  padding: 10px;  color: #656565;  background-color: #ddd;}/*标记的样式*/.line_flag{   width: 3px;height:18px;  background-color:hotpink;  margin-left: 10px;}.text_content{  line-height:18px;  margin-left: 10px;  font-family: "kaiti";}.score{  color:red;  font-size: 70%;  }.item_middle{  float:left;  margin:auto;  width:50%;   height:200px;}.item_right{  width:25%;   height:200px;  float:right;  }.action{  border-style: solid;  border-bottom-color: greenyellow;  font-size:70%;  color:greenyellow;}.actor{  font-size: 80%;}.sub_title{font-size:80%;}

　　同样，cinema的也可以照猫画虎。

到此，微票这一块就总结完毕了。

这是做的其他微信小程序的项目，还能发弹幕，神奇！！

--------------------------------------------------------------------------------------------------正经的分割线开始---------------------------------------------------------------------------------------------------

声明：为了保护老师所在培训学校的知识产权某些url打了马赛克。另外，这不是教学帖，只是实训总结，所以没必要因为完全照抄本人的代码而出了任何bug来追究本人的责任。

---------------------------------------------------------------------------------------------------正经的分割线结束---------------------------------------------------------------------------------------------------

小程序