uniapp教程

官网：https://zh.uniapp.dcloud.io/quickstart-hx.html

uni-app支持通过 可视化界面、vue-cli命令行 两种方式快速创建项目。

 uni-app自带的模板有 默认的空项目模板、Hello uni-app 官方组件和API示例，还有一个重要模板是 uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。
HBuilderX 版本：3.99

uni，读 you ni，是统一的意思。

 

安卓app打包流程：

Hbuilder在菜单栏选择“发行”，选择“原生App-云打包”，使用云打包不需要学习Android Studio的使用，节省开发时间，但是云打包需要排队（排队人数越多等待时间越长），

 

简单例子：

<template>
    <view class="content">
        <view class="uni-list">
            <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in news" :key="index" @tap="openinfo" :data-newsid="item.post_id">
                <view class="uni-media-list">
                    <image class="uni-media-list-logo" :src="item.author_avatar"></image>
                    <view class="uni-media-list-body">
                        <view class="uni-media-list-text-top">{{item.title}}</view>
                        <view class="uni-media-list-text-bottom uni-ellipsis">{{item.created_at}}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                news : []
            };
        },
        onLoad:function(){
            uni.showLoading({
                title:"加载中...."
            })
            uni.request({
                url: 'https://unidemo.dcloud.net.cn/api/news',
                method: 'GET',
                data: {},
                success: res => {
                    this.news = res.data;
                    uni.hideLoading();
                },
                fail: () => {},
                complete: () => {}
            });
        },
        methods: {
            openinfo(e) {
                var newsid = e.currentTarget.dataset.newsid;
                uni.navigateTo({
                    url: '../info/info?newsid='+newsid
                });
            }
        },
    }
</script>

<style>
.uni-media-list-body{height: auto;}
.uni-media-list-text-top{line-height:1.6em;}
</style>

info.vue

<template>
    <view class="content">
        <view class="title">{{title}}...</view>
        <view class="art-content">
            <rich-text class="richText" :nodes="strings"></rich-text>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: '',
                strings : ''
            }
        },
        onLoad:function(e){
            console.log(e);
            uni.request({
                url: 'https://unidemo.dcloud.net.cn/api/news/36kr/'+e.newsid,
                method: 'GET',
                data: {},
                success: res => {
                    console.log(res);
                    this.title = res.data.title;
                    this.strings = res.data.content;
                },
                fail: () => {},
                complete: () => {}
            });
        }
    }
</script>

<style>
.content{padding:10upx 2%; width: 96%; flex-wrap:wrap;}
.title{line-height:2em; font-weight:700; font-size:38upx;}
.art-content{line-height:2em;}
</style>

 

https://uniapp.dcloud.net.cn/collocation/pages.html#condition

condition

启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。

属性说明：

属性	类型	是否必填	描述
current	Number	是	当前激活的模式，list节点的索引值
list	Array	是	启动模式列表

list说明：

属性	类型	是否必填	描述
name	String	是	启动模式名称
path	String	是	启动页面路径
query	String	否	启动参数，可在页面的 onLoad 函数里获得

注意： 在 App 里真机运行可直接打开配置的页面，微信开发者工具里需要手动改变编译模式，