uni-app 从入门到实践开发

uni-app

uni-app背景介绍

当前跨平台开发存在的3个问题
1、多端泛滥
2、体验不好
3、生态不丰富

uni-app 产品特征

1、跨平台更多 —— 条件编译:优雅的在一个项目里调用不同平台的特色功能!
2、运行体验更好 —— 组件、api与微信小程序一致,兼容 weex 原生渲染
3、通用技术栈,学习成本更低 —— vue 的语法、微信小程序的api、内嵌 mpvue
4、开放生态,组件更丰富 —— 支持通过 npm 安装第三方包、支持微信小程序自定义组件及 SDK、兼容 mpvue 组件及项目、App 端支持和原生混合编码、DCloud 将发布插件市场

功能框架

功能框架

uni-app 规范

页面文件遵循 Vue 单文件组件(SFC)规范
组件标签靠近小程序规范
接口能力(JS API)靠近微信小程序规范
数据绑定及事件处理同 Vue.js 规范
为兼容多端运行,建议使用 flex 布局进行开发

条件编译

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
<view class="content">
<!-- #ifdef MP-WEIXIN -->
<view class="">
只会编译到小程序
</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view class="">
只会编译到 APP
</view>
<!-- #endif -->
</view>
</template>

生命周期

应用生命周期

页面生命周期

组件生命周期

组件

name

配置

pages.json

globalStyle

pages

API

快速创建项目

通过 HBuilderX 创建项目

通过vue-cli命令行 创建项目

1
2
3
// 安装 vue cli
npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-project

native.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//  安卓 拨打电话
function call(){
// 导入Activity、Intent类
var Intent = plus.android.importClass("android.content.Intent");
var Uri = plus.android.importClass("android.net.Uri");
// 获取主Activity对象的实例
var main = plus.android.runtimeMainActivity();
// 创建Intent
var uri = Uri.parse("tel:10010"); // 这里可修改电话号码
var call = new Intent("android.intent.action.CALL",uri);
// 调用startActivity方法拨打电话
main.startActivity( call );
// ...
}

uni-app 项目

目录结构

单文件

vue.js

文件导入

尺寸单位

rpx

代码块提示

HBuilderX 快捷键

项目发行

项目配置 页面配置

pages style app-plus

微信小程序 配置
condition:{
}

navigator 跳转

组件、组件生命周期

组件传值 props\emit、uni.$on、uni.$emit

uni-ui 组件库的引入

uni-app 规范

条件编译

App 端的 nvue 开发

HTML5+

组件、自定义组件、基础组件、生命周期、路由、API、语法、布局样式

Hbuiderx

vuecli方式

微信开放平台 unionid

分享

交互反馈

redis 根据用户信息生成 随机 key 登录根基这个生成的随机键来判断

(根据用户信息+上次登录的时间)-临时想法

uniapp 一键登录

e.currentTarget.id

e.target.id

获取系统信息

设置导航条

下拉刷新 onpullDownRefresh

上拉加载 onReachBottom

登录 openid unionid多端一致 微信开发平台

全局变量

节点信息

socket 的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import io from './common/weapp.socket.io.js'

Vue.prototype.socket = io('http://192.168.1.3:8082')


methods:{
// 发送讯息
send: function(){
if(this.cont.length>0){
this.arr.push(this.cont);
let aa = this.cont
this.socket.emit('message','aa')
}
}
// 接受广播讯息
getmsg: function(){
this.socket.on('gbmsg',data=>{
this.arr.push(data);
})
}
}

uni-app 去掉 App、h5 端的导航栏

pages.json

1
2
3
4
5
6
7
8
9
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#007AFF",
"backgroundColor": "#FFFFFF",
"h5": {
"titleNView": false
}
}

全局样式引入

vue

1
2
3
4
// App.vue 
<style>
@import url('/common/free.css')
</style>

引入图标库

1
2
3
4
5
/* icon.css */
@font-face{
font-family: "iconfont";
src: url('data:base64') format('woff2');
}
1
2
3
4
5
6
// App.vue
<style>
/* #ifndef APP-PLUS-NVUE */
@import url('/common/icon.css')
/* endif */
</style>

nvue

1
2
3
4
5
6
7
8
9
10
11
// 只支持 unicode
// App.vue
<script>
onLaunch: function(){
const domModule = weex.requireModule('dom')
domModule.addRule('fontFace', {
'fontFamily': "iconfont",
'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
});
}
</script>

midButton 中间凸起按钮设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
{
"pages": [{
"path": "pages/component/index",
"style": {
"navigationBarTitleText": "组件"
}
}, {
"path": "pages/API/index",
"style": {
"navigationBarTitleText": "接口"
}
}, {
"path": "pages/component/view/index",
"style": {
"navigationBarTitleText": "view"
}
}],
"condition": { //模式配置,仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [{
"name": "test", //模式名称
"path": "pages/component/view/index" //启动页面,必选
}]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "演示",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"usingComponents":{
"collapse-tree-item":"/components/collapse-tree-item"
},
"renderingMode": "seperated", // 仅微信小程序,webrtc 无法正常时尝试强制关闭同层渲染
"pageOrientation": "portrait", //横屏配置,全局屏幕旋转设置(仅 APP/微信/QQ小程序),支持 auto / portrait / landscape
"rpxCalcMaxDeviceWidth": 960,
"rpxCalcBaseDeviceWidth": 375,
"rpxCalcIncludeWidth": 750
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"height": "50px",
"fontSize": "10px",
"iconWidth": "24px",
"spacing": "3px",
"list": [{
"pagePath": "pages/component/index",
"iconPath": "static/image/icon_component.png",
"selectedIconPath": "static/image/icon_component_HL.png",
"text": "组件"
}, {
"pagePath": "pages/API/index",
"iconPath": "static/image/icon_API.png",
"selectedIconPath": "static/image/icon_API_HL.png",
"text": "接口"
}],
"midButton": {
"width": "80px",
"height": "50px",
"text": "文字",
"iconPath": "static/image/midButton_iconPath.png",
"iconWidth": "24px",
"backgroundImage": "static/image/midButton_backgroundImage.png"
}
},
"easycom": {
"autoscan": true, //是否自动扫描组件
"custom": {//自定义扫描规则
"^uni-(.*)": "@/components/uni-$1.vue"
}
},
"topWindow": {
"path": "responsive/top-window.vue",
"style": {
"height": "44px"
}
},
"leftWindow": {
"path": "responsive/left-window.vue",
"style": {
"width": "300px"
}
},
"rightWindow": {
"path": "responsive/right-window.vue",
"style": {
"width": "300px"
},
"matchMedia": {
"minWidth": 768
}
}
}
1
2
3
4
5
6
7
8
// 只支持 unicode
// App.vue
<script>
onLaunch: function(){
uni.onTabBarMidButtonTap(()=>{
})
}
</script>

业务

刷礼物

list
App nvue 专用组件
app端nvue专用组件。在app-nvue下,如果是长列表,使用list组件的性能高于使用view或scroll-view的滚动。原因在于list在不可见部分的渲染资源回收有特殊的优化处理。

如果需要跨端,建议使用 uni-ui 的 uni-list组件,它会自动处理webview渲染和原生渲染的情况,在app-nvue下使用list组件,而在其他平台则使用页面滚动。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// live.nvue
<template>
<f-gift ref="gift"></f-gift>
</template>
<script>
mounted(){
setInterval(()=>{
this.$refs.gift.send({
username: '发送人',
avatar: "",
gift_name: '蛋糕',
gift_image: '/static/gift/3.png',
num: 1
})
})
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
//  f-gift.vue 礼物组件
<template>
<list style="width:520rpx;height:500rpx;" :show-scrollbar="false" :bounce="false">
<!-- 注意事项: 不能使用 index 作为 key 的唯一标识 -->
<cell class="flex align-center px-3" v-for="(item, index) in dataList" :key="item.id" insert-animation="default" delete-animation="default">
<view style="width: 325rpx;">
</view>
</cell>
</list>
</template>

<script>
const domModule = weex.requireModule('dom')

export default {
data () {
return {
gifts: [{}]
}
},
method:{
// 送礼物
send(gift){
this.gifts.push(gift)
this.toBottom();
this.autoHide();
}
// 置于底部
toBottom(){
this.$nextTick(() => {
let index = this.gifts.length -1
let ref = 'item' + index
if(this.$refs[ref]){
dom.scrollToElement(this.$refs[ref][0],{})
}
})
},
// 自动消失
autoHide(){
if(this.gifts.length){
let timer = setTimeout(()=>{
this.gifts.splice(0,1);
},5000)
}
}
}
}
</script>

弹幕

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
<view>
<scroll-view scroll-y="true" scroll-with-animation :scroll-inio-view="scrollInToView">
<view :id="'danmu'+item.id" >
</view>
</scrioll-view>
</view>
</template>
<script>
methods: {
toBottom(){
let len = this.list.length;
if(len > 0 && this.list[len-1]){
this.scrollInToView = 'danmu' + this.list[len - 1].id
}
}
}
</script>

UI 框架

uView:uView是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码, 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)
ThorUI:简约而不简单一直是ThorUI的追求。ThorUI目前有微信小程序原生版本uni-app版本,后续会扩展到其他原生版本,扩大生态。 除了组件库ThorUI还会陆续发布一些常用模板,使开发更加高效。

目前组件与模板默认支持App端(IOS和Android)、H5、微信小程序、QQ小程序。

colorui:鲜亮的高饱和色彩,专注视觉的小程序组件库

报错

微信小程序

  • forceUpdate 错误
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
SystemError (appServiceSDKScriptError)
Cannot read property 'forceUpdate' of undefined
TypeError: Cannot read property 'forceUpdate' of undefined
at http://127.0.0.1:28307/appservice/__dev__/WAService.js:2:1415111
at http://127.0.0.1:28307/appservice/__dev__/WAService.js:2:633507
at o (http://127.0.0.1:28307/appservice/__dev__/asdebug.js:1:3197)
at e.exports.<anonymous> (http://127.0.0.1:28307/appservice/__dev__/asdebug.js:1:3577)
at http://127.0.0.1:28307/appservice/__dev__/asdebug.js:1:1844
at Array.forEach (<anonymous>)
at WebSocket._ws.onmessage (http://127.0.0.1:28307/appservice/__dev__/asdebug.js:1:1826)
console.error @ VM38:1
errorReport @ VM45 WAService.js:2
(anonymous) @ VM45 WAService.js:2
(anonymous) @ VM45 WAService.js:2
o @ VM42 asdebug.js:1
(anonymous) @ VM42 asdebug.js:1
(anonymous) @ VM42 asdebug.js:1
_ws.onmessage @ VM42 asdebug.js:1

配置微信小程序 AppID

  • sitemap.json 错误

sitemap.json Error: 未找到入口 sitemap49.json 文件,或者文件读取失败,请检查后重新编译。

根目录下创建 sitemap.json 并配置

uni-app 图表
  • H5端流行的echart报表因为涉及大量dom操作,无法跨端使用,而wx-chart在跨端和更新方面都不足,如果要做小程序,推荐使用全端可用的uChart
  •  如只考虑H5端,也可以继续使用 echart、f2等常规web图表。
  •  如不考虑小程序,那么App端和H5,还可以通过renderjs 技术来使用 echart、f2等web图表,功能性能比uchart更好。什么是renderjs基于renderjs使用echart的示例

不开发APP,可以不使用nvue

插件

插件大赛2020评奖结果揭晓,这些优秀的插件你都用起来了吗?

极光认证官方SDK

uCharts高性能跨全端图表

uParse修复版-html富文本加载

APP-引导页+官方示例

封装的request网络请求

开源项目

Uni-App

awesome-uni-app

来客推电商 / 小程序商城+APP+SaaS+前后代码开源


相关资料
[视频]uni-app跨平台框架官方教程
[视频]uni-app实战直播app全栈开发,uni-app实战视频教程

[视频]uni-App从入门到实战
[视频]uni-app实战商城类app和小程序

[视频]uni-app 快速入门 从零开始实现新闻资讯类跨端应用
[视频]uni-app基础+进阶+案例
[视频]uni-app零基础入门到项目实战

uni-app 零基础到实战课程

2020uniApp视频全套资料配源码【千锋Web前端】
uniapp 打造美团外卖微信小程序,uni-app,vue 中高级实战课程
ThinkPHP6+uniapp实战开发【简书app】
uni-app 跨平台 App 终极解决方案
uni-app视频教程合集|UniApp实战教程

小程序开发:用原生还是选框架(wepy/mpvue/taro/uni-app)– 第1季
创建、运行、发布uni-app
uni-app 全局变量的几种实现方式
uni-app 中保持用户登录状态
uni-app去掉h5端的导航栏
uni-app中过滤器的使用
uniapp获取微信手机号码
uni-app H5跨域问题解决方案(CORS、Cross-Origin)
直播业务指南
历时六个月月完全由UNI做推流APP的经历分享

跨平台前端框架uni-app学习
Native.js示例汇总
dcloud 社区问答

SystemError (appServiceSDKScriptError)
高效开发技巧
开发规范

uni-app官方教程学习手记
uni-app—从安装到卸载
wepy踩坑 sitemap.json Error: 未找到入口 sitemap49.json 文件,或者文件读取失败,请检查后重新编译。
解决uni-app开发环境中H5端跨域问题

uni-app 全局变量的几种实现方式

uni-app 启动界面(splash)参数配置说明 | 启动慢的原因(https://ask.dcloud.net.cn/article/35021)

HBuilder X运行小程序时,打开了微信开发者工具,但微信开发者工具未运行项目但又没有错误提示

uni-app 小程序系列教程

uni-app官网

uni-app 资源在线升级/热更新

uni-app 整包升级/更新方案

关于 uni-app
白话uni-app
vue
vue和微信小程序的区别、比较
uni-ui
H5 端路由配置
网络请求封装拦截等可参考插件市场
从App端跳转到微信小程序方式
uni-app导航栏文档和注意事项
导航栏开发指南
导航栏演示示例
uni-app大法好 ,nvue 从入坑到放弃
uni-app小程序手把手项目实战

uni-app网络请求封装
uni-app 请求封装

http://www.hcoder.net/tutorials/info/id/1335

Native.js示例汇总

MUI 视频教程

MUI 介绍、新项目创建、基础布局

MUI 为何诞生

1、性能和体验的差距,一直是 mobile app 开发者放弃 HTML5 的首要原因。
2、浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新、侧滑抽屉卡顿等问题,这些都让 HTML5 开发者倍感挫败,尤其在 Android 低端机运行。
3、浏览器默认控件样式又少又丑,制作一个漂亮的控件非常麻烦,也有一些制作简单的 ui 框架但性能低下。mui 框架有效的解决了这些问题,这是一个可以方便开发出高性能 App 的框架,也是目前最接近原生 App 效果的框架。

MUI 的定位是:最接近原生体验的移动 App 的 UI 框架

基于 mui 的定位,产生了 mui 的几个特点,轻、小、只涉及 UI、只为移动 App 而生、界面风格原生话。

1、mui 不是 jq,不封装 dom 操作

与 ui 无关的 mui 不做,可以用 jq 或 zepto 就用,并不冲突。
但并不建议在 移动 App 里引入 jq 或 zepto 这些框架,原因如下:
为了性能,层层封装的框架,尤其是遍历 dom 时,影响效率,尤其在低端 Android 手机上。

原生 JS 挺简单,为何需要 jq ?

手机上只有 webkit 浏览器(忽略 wp,反正 mui 不支持 wp),根本就不需要 jq 这种封装来操作 dom。
而且 HBuilder 提供了代码块来简化开发,敲 dg、dq,直接生成 document.getElementById(“”)、document.querySelectorAll(“”),非常快捷方便,而且执行性能非常高,而且没有浏览器兼容问题。

2、mui、HTML5+、5+ Runtime 的关系说明

mui 是一个前端框架,HTML5+ 是一套 HTML5 能力扩展规范,HTML5+ Runtime 是实现 HTML5+ 规范的强化浏览器引擎。

开始体验 MUI

1、安装新版本 HBuilder

HBuilder

2、新建 app 项目

创建 MUI 项目

基础布局

头部

核心 css mui-bar mui-bar-nav

1
2
3
4
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">test</h1>
</header>

主体部分

核心 css mui-content

1
2
3
<div class="mui-content">
test...
</div>

代码效果

组件

折叠面板

1
2
3
4
5
6
7
8
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板1</a>
<div class="mui-collapse-content">
<p>面板1子内容</p>
</div>
</li>
</ul>

代码效果

常用按钮

1
2
3
4
5
6
<button type="button" class="mui-btn">默认</button>
<button type="button" class="mui-btn mui-btn-primary">蓝色</button>
<button type="button" class="mui-btn mui-btn-success">绿色</button>
<button type="button" class="mui-btn mui-btn-warning">黄色</button>
<button type="button" class="mui-btn mui-btn-danger">红色</button>
<button type="button" class="mui-btn mui-btn-royal">紫色</button>

代码效果

操作表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="mui-content">
<button type="button" class="mui-btn" onclick="handleClick()">操作表</button>
</div>
<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
<!-- 可选择菜单 -->
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#">菜单1</a>
</li>
<li class="mui-table-view-cell">
<a href="#">菜单2</a>
</li>
</ul>
<!-- 取消菜单 -->
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#sheet1"><b>取消</b></a>
</li>
</ul>
</div>
<script>
mui.init();
mui.plusReady(function () {});
function handleClick() {
mui("#sheet1").popover("toggle");
}
</script>

代码效果

数字角标

1
2
3
4
5
6
7
8
9
10
11
12
<span class="mui-badge">1</span>
<span class="mui-badge mui-badge-primary">12</span>
<span class="mui-badge mui-badge-success">123</span>
<span class="mui-badge mui-badge-warning">3</span>
<span class="mui-badge mui-badge-danger">45</span>
<span class="mui-badge mui-badge-purple">456</span>
<span class="mui-badge mui-badge-inverted">1</span>
<span class="mui-badge mui-badge-primary mui-badge-inverted">2</span>
<span class="mui-badge mui-badge-success mui-badge-inverted">3</span>
<span class="mui-badge mui-badge-warning mui-badge-inverted">4</span>
<span class="mui-badge mui-badge-danger mui-badge-inverted">5</span>
<span class="mui-badge mui-badge-royal mui-badge-inverted">6</span>

代码效果

单选框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<div class="mui-content">
<div class="mui-input-row mui-radio">
<label>radio</label>
<input name="radio2" type="radio" />
</div>
<div class="mui-input-row mui-radio">
<label>radio</label>
<input name="radio2" type="radio" />
</div>
<div class="mui-input-row mui-radio mui-left">
<label>面条</label>
<input class="radio1" name="radio1" type="radio" value="面条" />
</div>
<div class="mui-input-row mui-radio mui-left">
<label>包子</label>
<input
class="radio1"
name="radio1"
type="radio"
value="包子"
checked="checked"
/>
</div>
<ul class="mui-table-view mui-table-view-radio">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 1</a>
</li>
<li class="mui-table-view-cell mui-selected">
<a class="mui-navigate-right">Item 2</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 3</a>
</li>
</ul>
<button type="button" class="mui-btn" onclick="getVals()">获取值</button>
</div>
<script>
mui.init();
mui.plusReady(function () {});
function getVals() {
let res = getRadioRes("radio1");
if (res == null) {
mui.toast("请选择");
return;
}
mui.toast(res, { duration: "long", type: "div" });
}
function getRadioRes(className) {
let rdsObj = document.getElementsByClassName(className);
let checkVal = null;
for (let i = 0; i < rdsObj.length; i++) {
if (rdsObj[i].checked) {
checkVal = rdsObj[i].value;
}
}
return checkVal;
}
</script>

代码效果

复选框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div class="mui-content">
<div class="mui-input-row mui-checkbox mui-left">
<label>checkbox左侧显示示例</label>
<input name="checkbox1" class="checkbox1" value="Item 1" type="checkbox" />
</div>
<div class="mui-input-row mui-checkbox mui-left">
<label>checkbox左侧显示示例</label>
<input name="checkbox1" class="checkbox1" value="Item 2" type="checkbox" />
</div>
<div class="mui-input-row mui-checkbox mui-left">
<label>checkbox左侧显示示例</label>
<input
name="checkbox1"
class="checkbox1"
value="Item 3"
type="checkbox"
checked="checked"
/>
</div>
<button type="button" class="mui-btn" onclick="getVals()">获取值</button>
</div>
<script>
mui.init();
mui.plusReady(function () {});
function getVals() {
let res = getRadioRes("checkbox1");
if (res.length == 0) {
mui.toast("请选择");
return;
}
mui.toast(res, { duration: "long", type: "div" });
}
function getRadioRes(className) {
let rdsObj = document.getElementsByClassName(className);
let checkVal = [];
for (let i = 0; i < rdsObj.length; i++) {
if (rdsObj[i].checked) {
checkVal.push(rdsObj[i].value);
}
}
return checkVal;
}
</script>

代码效果

系统日期选择框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<button type="button" class="mui-btn" onclick="pickDate()">获取日期</button>
<script>
function pickDate() {
let dDate = new Date();
// 设置当前日期(不设置默认当前日期)
dDate.setFullYear(2016, 7, 16);

let minDate = new Date()
// 最小时间
minDate.setFullYear(2010, 1, 1);
let maxDate = new Date();
// 最大时间
maxDate.setFullYear(2020, 11, 31);
plus.nativeUI.pickDate(
function(e) {
let d = e.date;
mui.toast('您选择的日期是:' + d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate());
},
function(e) {
mui.toast('你没有选择日期');
}, {
title: '请选择日期',
date: dDate,
minDate: minDate,
maxDate: maxDate
})
}
</script>

代码效果

系统时间选择框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<button type="button" class="mui-btn" onclick="pickTime()">获取时间</button>
<script>
function pickTime(){
var myDate = new Date();
var h = myDate.getHours();
var min = myDate.getMinutes();
var dTime = new Date();
dTime.setHours(h,min);
plus.nativeUI.pickTime(function(e){
var d = e.date;
mui.toast('您选择的时间是' + d.getHours() + ":" + d.getMinutes());
},function(e){
mui.toast('您没有选择时间')
},{
title:'请选择时间',
is24Hour: true,
time:dTime
})
}
</script>

代码效果

对话框

警告框

1
2
3
4
5
6
7
8
<button type="button" class="mui-btn" onclick="alert()">警告框</button>
<script>
function alert() {
mui.alert('请不要随便点击', '警告消息', '确定', function() {
mui.toast('提示对话框上关闭后的回调函数');
})
}
</script>

确认框

1
2
3
4
5
6
7
8
9
10
11
12
<button type="button" class="mui-btn" onclick="confirm()">确认框</button>
<script>
function confirm() {
mui.confirm('MUI 是个好框架?', 'Hello MUI', new Array('否', '是'), function(e) {
if (e.index == 1) {
mui.toast('感谢您的支持')
} else {
mui.toast('MUI 没有得到你的认可,继续加油!');
}
})
}
</script>

输入对话框

1
2
3
4
5
6
7
8
9
10
11
12
<button type="button" class="mui-btn" onclick="prompt()">输入对话框</button>
<script>
function prompt() {
mui.prompt('请输入您对 MUI 的评语', '性能好', 'Hello MUI', new Array('取消', '确认'), function(e) {
if(e.index == 1){
mui.toast(e.value);
}else{
mui.toast('您取消了输入');
}
});
}
</script>

消息提示框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<button type="button" class="mui-btn" onclick="shorttoast()">短的消息提示框</button>
<button type="button" class="mui-btn" onclick="longtoast()">长的消息提示框</button>

<script>
function shorttoast(){
mui.toast('short 消息提示框',{
"duration" : "short"
})
}

function longtoast(){
mui.toast('long 消息提示框',{
"duration" : "long"
})
}
</script>

表单元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form class="mui-input-group">
<div class="mui-input-row">
<label>用户名</label>
<input type="text" class="mui-input-clear" placeholder="请输入用户名">
</div>
<div class="mui-input-row">
<label>密码</label>
<input type="password" class="mui-input-password" placeholder="请输入密码">
</div>
<div class="mui-button-row">
<button type="button" class="mui-btn mui-btn-primary" >确认</button>
<button type="button" class="mui-btn mui-btn-danger" >取消</button>
</div>
</form>

表单

初始化

mui 在 mui.int() 中会自动初始化基本控件,但是动态添加的元素需要重新进行初始化

1
mui('.mui-input-row input').input();

轮播组件

连接模拟器

连接模拟器需要用到 ADB 。

1
2
3
4
5
// 连接模拟器端口
adb connect 127.0.0.1:62001

// 查看连接设备
adb devices

也可以通过 修改 HBuilder 运行配置 Android 模拟器端口 来实现连接。

注意:引入顺序。mui.min.js 需要在 demo渲染前 加载。如果在 demo 渲染后加载会莫名报错

1
2
3
4
5
6
7
8
9
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
</head>

以上是我对下列视频及文章的归纳和总结。
MUI 视频教程


相关资料
HBuilder X 中使用模拟器进行 App 开发
ADB 常用命令及其用法大全
如何查看夜神模拟器的端口
DCloud appid 用途/作用/使用说明
Android 平台签名证书(.keystore)生成指南
Android 平台本地(离线)打包指南 - Android Studio
Android 平台云端打包证书使用说明
manifest.json 文档说明
MUI – plus初始化原理及plus is not defined,mui is not defined 错误汇总
Hbuilderx真机运行失败,失败原因:手机上没有信任本计算机的授权,请在手机上信任该

《Android App开发从入门到精通》

第1章 Android Studio的介绍以及使用

探索Android Studio

基于Gradle的灵活构建系统。• 快速且功能丰富的模拟器。• 可针对所有Android设备进行开发的统一环境。• Instant Run,可将变更推送到正在运行的应用,无须构建新的APK。• 帮助构建应用程序和导入示例代码以及GitHub集成。• 丰富的测试工具和框架。• 可捕捉性能、易用性、版本兼容性以及其他问题的Lint工具。• C++和NDK支持。• 内置对Google云端平台的支持,可轻松集成Google Cloud Messaging和App引擎。

书中案例源码下载
https://github.com/ansen666/book_source_code

Android 从入门到实践开发

P1 Android 开发概述和开发工具

Android 开发概述

Android 是一个开源的,基于Linux的移动设备操作系统,主要使用于移动设备,如智能手机和平板电脑。
Android 是由 Google 及其他公司带领的开放手机联盟开发的操作系统。

Android 编程是基于 Java 编程语言的,因此,如果你理解 Java 编程,这将利于你更好的学习 Android 应用程序开发。

Android官网
学习 Java

Android 开发是移动应用开发的表现形式之一。

Android、iOS、H5 App、Native + H5、RN、Ionic、MUI…

项目流程
完整项目最精简流程

Android 开发工具

  • 下载安装 Java JDK
  • 下载安装 Android Studio
阅读更多

2019 安卓混合开发视频精讲

原生语言

苹果手机:iOS 系统,由 Swift 和 C++ / Objective-C 语言编写,后缀名为 ipa (iOS 开发的安装包的后缀名)
Swift 语言是一种开源的语言(半开半闭)

安卓手机:Android 系统,由 Java (Android)语言编写,后缀名为 apk 开源的。

wp手机: Windows Phone 系统,由 C# 语言编写,后缀名分为两类 (wp7 wp8的是 xap wp8.1以后用 8.1 的 SDK 开发的是 appx)一般说到混合开发不考虑这个版本

序号 系统 语言 后缀名
1 iOS OC/C++/Swift ipa
2 Android Java apk
3 wp C# appx
阅读更多
You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.