app开发-1 _app开发

于今腐草无萤火，终古垂杨有暮鸦。这篇文章主要讲述app开发-1相关的知识，希望能为你提供帮助。
一.了解HBuilder【app开发-1】HBuilder内封装了大量的书籍,极大方便了使用
官方文档:
http://dev.dcloud.net.cn/mui/ui/
关于布局:
mhead 表头.mbody 身子,mtap 尾部
操作:
1.跳转页面 mui.openWindow

文章图片

document.getElementById("setting").addEventListener("tap",function(){ #tap监听事件dga快捷方式 mui.openWindow({#mui.openWindow 跳转到新页面 "url":"new.html",#跳转的页面文件 "id":"new.html",#跳转的id styles:{ top:"0px",# styles 样式固定时必须用top作为参照 bottom:"50px" }, extras:{# extras 传值需要在new.html上注入plusReady(function{}) ,内部填写变量= plus.webview.currentWebview()接收.name:"666" } }); });

文章图片
2.点击显示提示 toast

document.getElementById(‘email‘).addEventListener(‘tap‘,function () { mui.toast("你点击邮件了"); })

3.mui.fire 跨表发送数据

文章图片

mui.plusReady(function(){}) document.getElementById(‘email‘).addEventListener(‘tap‘,function () { var new_page = plus.webview.getWebviewById("new.html"); #同过mui.fire传值的参数,指向id为要发送数据的html 的id,使用plus必须有 mui.plusReady(function() mui.fire(new_page,‘show_alert‘,{name:"chunsheng"}); #mui.fire三个参数(访问页面id,function回调函数名,字典形式内容),需要在访问html接收这个回调函数 })

文章图片
另一端的接收

document.addEventListener("show_alert",function(data){ #这里全局监听传递的回调函数 console.log(JSON.stringify(data.detail.name)); #监听返回的函数必须 .detail 转换为Object字典形式 alert("欢迎观临"); })

4.json post请求

文章图片

document.getElementById(‘login_btn‘).addEventListener(‘tap‘,function () { var username = document.getElementById("username").value; var password = document.getElementById("password").value; mui.post(‘http://192.168.13.144:9527/login‘,{ username:username, password:password },function(data){ mui.toast(data.msg); },‘json‘ ); }) mui.post(‘‘,#‘‘ 存访问的地址 { #传递的参数位置 },function(data){ #接收数据位置 },‘json‘#若为jsonity格式,可不告诉客户端请求头为json格式 );

文章图片
5.图文列表,自己创建列表格式通过createElement("")创建标签和appendChild()定义层级关系

文章图片

function create_item(content){ var li = document.createElement("li"); #创建标签li createElement li.className ="mui-table-view-cell mui-media"; #配置class信息className var a = document.createElement("a"); var img = document.createElement("img"); img.className ="mui-media-object mui-pull-left"; img.src = "http://192.168.13.144:9527/get_image/"+content.image; #配置src 直接访问地址获取 var div = document.createElement("div"); div.className="mui-media-body"; div.innerText = content.tilte; #创建文本innerText var p = document.createElement("p"); p.className="mui-ellipsis"; p.innerText=content.text; li.appendChild(a); #创建层级关系 a.appendChild(img); a.appendChild(div); div.appendChild(p); document.getElementById("content_list").appendChild(li); #注意,这是有名函数,需要调用才可用 }

文章图片
调用函数

文章图片

mui.plusReady(function () { mui.post(‘http://192.168.13.144:9527/content_list‘,{},function(data){ for (var i = 0; i < data.length; i++) { //console.log(JSON.stringify(data[i])) create_item(data[i]); #调用函数 } },‘json‘ ); })

文章图片
关于后端传递src

文章图片

from flask import Flask,request,jsonify,send_file from setting import MONGO_DB @app.route("/content_list",methods=["POST"]) def content_list(): res = list(MONGO_DB.content.find({},{"_id":0})) return jsonify(res)@app.route("/get_image/< filename> ") def get_image(filename): import os path = os.path.join("tupian",filename) return send_file(path)

文章图片
6.将其他页面在首页显示 mui.init( ) subpages

文章图片

mui.init({ subpages:[{ #将main页面显示在首页的方法subpages url:‘main.html‘, id:‘main.html‘, styles:{ top:‘0px‘,//mui标题栏默认高度为45px； bottom:‘50px‘//默认为0px，可不定义； } }] });

文章图片
7.全局设置 mui.js
使用时一定要引用

< script src="https://www.songbingjia.com/android/js/mui.js" type="text/javascript" charset="utf-8"> < /script>

内容

window.serv = "http://192.168.13.189:9527"; window.serv_image = window.serv + "/get_image/"; window.serv_music = window.serv + "/get_music/";

在以后访问的路由中,都可以使用变量代替
8.将音频播放 myplayer

myplayer = plus.audio.createPlayer(window.serv_music + Sdata.audio); #后面是访问文件的地址 myplayer.play(); 播放 myplayer.pause(); #暂停 myplayer.resume(); #继续 myplayer.stop(); #停止

9.查看自身ip

//var sdata = https://www.songbingjia.com/android/plus.webview.currentWebview(); # 在plusready ()使用 //console.log(JSON.stringify(sdata)) #这里获取的是页面的全部信息

10websocket访问

文章图片

var ws = new WebSocket("ws://192.168.13.189:3721/app/app01"); #这里同样可以通过websocket进行数据访问 document.addEventListener("send_music",function(data){ var send_str = data.detail // {to_user:"toy123",music:Sdata.audio} ws.send(JSON.stringify(send_str)); })