牛腩学用MUI做手机APP

2016-08-29 浏览:2385

       斗鱼直播间直播学习撸码,最终目标是用MUI做一个手机APP(暂定android平台,攒钱买IPHONE 7SE!!!),直播内容含整个软件APP的制作过程(含后台接口的制作,放到自己买的阿里云服务器,求别黑!!!),注:之前没有接触过,只能是在直播的时候边学边做。

     技术要求:MUI+HBUILDER+ASP.NET MVC+SQL SERVER 2012 Express

     直播计划:

        2016年08月23日

            01-学习目标概述及软件原型图制作 (已录制

       2016年08月30日 21:00

            02-界面制作  (已录制)

       2016年09月01日 21:00

            03-登录功能制作(已录制)

    2016年09月03日 21:00

        04-登录后信息的保存及头像上传功能  (已录制)

     2016年09月07日 21:00

        05-博客列表页制作(tab切换+下拉刷新)(已录制)

     2016年09月11日 10:00

        06-视频列表页及详情页制作(已录制)


     2016年09月14日 21:00

        07-购物车页面制作 (已录制)

      2016年09月18日 21:00

        08-购物车页面制作2  (已录制)


       2016年09月23日 21:00

         09-管理后台制作  (已录制)


     2016年09月25日 20:00

        10-管理后台制作2


     优酷播放:http://v.youku.com/v_show/id_XMTcyMTQ2Nzk4OA==.html?f=28128525&from=y1.7-3

     视频下载地址:http://pan.baidu.com/s/1qYQZ9RA (失效自行QQ联系索取)

     斗鱼直播间地址:http://www.douyu.com/niunan


下面是每一集的备忘录:


2016年09月23日
 后台页面制作
  所需要的技术及相关资料:
    ASP.NET MVC,
    SQL2014,
    网上下载的后台静态页模板,
    kindeditor在线编辑,
    h5上传图片功能,
    my97_js日历选择控件,
    牛腩代码生成器,
  后台路径:/adnn1n/
  后台栏目:
   top: 欢迎页、修改密码、前台首页、退出后台
   left: 首页设置(首页大图滚动,首页区域图片)、博客管理(博客分类、博客列表),
          视频管理(视频列表)、订单管理(订单列表)
          用户管理(用户列表)

2016年09月18日
 购物车页面制作2
  1、刷新购物车按钮
  2、清空购物车按钮
  3、加减商品数量时同时修改localtorage中的值
  4、购物车提交接口制作
    订单表:收货人,手机,地址,备注,状态(0待付款,1待发货,2待收货)
    订单明细表:商品ID,商品名称,单价,数量,订单表ID
  5、购物车页面通过MUI的AJAX方式提交到后台插入数据

2016年09月14日
 购物车页面制作
  1、思路
    数据存在localstorage中,以
    key:gwc_视频编号, value:数量
  2、加数量的按钮的JS脚本编写
  3、减数量的按钮的JS脚本编写
  4、计算合计方法的JS脚本
  5、视频详情页中加入购物车按钮
  6、编写接口取购物车数据
  7、购物车页面整合远程数据

2016年09月11日
 QQ群:323667178
 视频列表页面及详情页的制作
  1、建立测试页抄相关下拉刷新列表的相关代码
  2、编写列表接口
    视频表:标题、内容、价格、列表图片、访问量

  3、视频列表页取接口数据显示
  4、点击列表项弹出详情页并传ID参数过去
  5、编写详情页接口
  6、详情页取远程数据显示在页面上
  7、生成APK
  8、把Hbuider做的代码放到coding.net上
  9、把后台代码放到coding.net上

2016年09月07日
 博客列表页面的制作(TAB切换+下拉刷新)
  1、抄
  2、写后台接口
    数据库设计:分类表category:caname,bh,pbh,remark,博客表blog:title,createdate,body,visitnum,cabh,caname,remark

  3、通过接口取数据显示在页面上

2016年09月03日
 登录后用户信息的保存及头像上传
 1、如何保存已登录的用户信息
    web中已登录的用户信息保存在session
    mui中用户信息都是存在localStorage
    保存:localStorage.setItem('key','value')
    读取:localStorage.getItem('key')

 2、编写接口文档
 3、编写用户登录功能,注册和登录后跳转到我的页面
 4、编写我的信息编辑页面
 5、上传头像的功能思路
    原生应用上传头像,直接向接口发送图片的二进制字节流
    H5APP应用上传头像,使用H5的canvas把图片转为base64字符串后发送给接口
http://www.bcty365.com/content-146-3648-1.html
http://blog.niunan.net/show.php?id=426

 6、上传头像功能测试
 7、我的信息编辑页面功能完成
 8、传最新的接口代码到coding上并生成apk

2016年09月01日
 注册登录功能的制作
 1、MUI如何获取服务器上的相关数据
    html登录页上使用mui自带的ajax方法访问远程接口URL地址并传参数到服务器上,服务器根据参数进行相应处理,并返回JSON

 2、coding.net(github,百度云盘)建立后台接口项目
    命名:NiunanNetApp

 3、编写后台登录接口及部署到服务器上(ASP.NET MVC)
    http://niunannetapp.niunan.net/APPAPI/Login/
    所有的接口都会返回status和info,如果接口执行成功,status=y,如果失败,info里是失败信息
    跨域问题:域名不同的AJAX调用不了

 4、Hbuilder中进行登录页面的功能制作
 5、建立数据库,用户表,与程序绑定
 6、编写后台注册接口
    http://niunannetapp.niunan.net/APPAPI/Reg/

 7、Hbuilder中完成注册页面的功能制作

2016年08月30日
 1、界面制作
 2、点击tab切换到不同的界面(用plus的方式)
 3、生成APK安装包

2016年08月23日
 1、为什么在斗鱼直播
   为了不让我的斗鱼直播间关闭

 2、本次学习目标
    学习MUI开发手机APP,最终目标:把自己的个人网站(http://niunan.net)弄成一个手机APP(APK安装),用户可以在手机上查看视频详情及加入购物车,查看自己购买过的视频订单,手机上查看牛腩博客的内容

 3、MUI是什么
    个人观点:把制作好的HTML页面打包成APK安装包,可以发到android手机上进行安装
    官网:http://www.dcloud.io/mui.html

 4、下载MUI的相关开发工具HBuilder
     下载地址:http://www.dcloud.io/index.html

 5、hello world运行到手机上
 6、建立MUI的示例部署到手机上
 7、画APP软件原型图