码迷,mamicode.com
首页 > 其他好文 > 详细

文始小demo

时间:2021-03-04 13:28:21      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:color   demo   图片上传   需要   rip   本地   view   基础   tab   

    <!-- 1、 uni 项目 使用 HBuilderX 打开  -->
    编辑器下载地址 :  https://www.dcloud.io/
    
    <!-- 2、新建一个uni项目 -->
        (1)新建一个文件夹运行 :cnpm i epii-vue-cli -g
        (2)在该文件夹运行 : epii-vue-cli init
        (3)按照提示正常运行即可。 (安装 node_modules) (npm install -S)

    <!-- 3、文件配置  config文件夹 -->
        (1) config.base.js
                app_update_api : app更新接口
                upload_uri     :图片上传接口
                root_page      :跟页面(一进入app打开的页面,一般为/pages/tabs/index,(也可能有变更))
                no_login_pages :不需要登陆的页面,(例:["/pages/root/root", ])

        (2) config.development.js
                本地接口访问地址

        (3) config.production.js
                线上接口访问地址

    <!-- 4、几个注意事件 -->
        (1) 图片、css等静态文件放在static文件夹下。
        (2) 在pages文件夹下面创建项目所需的页面。
        (3) 创建页面后要在pages.json文件中注册。
        (3) 该项目的底部导航页面要以tabs命名。(例:"pages/tabs/index")

    <!-- 5、 uni-app 头部及底部导航设置 -->
        https://www.cnblogs.com/xiaoyaolang/p/13968907.html

    <!-- 6、 uni-app 基础格式,仅供参考-->
        https://www.cnblogs.com/xiaoyaolang/p/13644720.html

    <!-- 7、Eapp 调接口 -->
        https://www.cnblogs.com/xiaoyaolang/p/13646138.html

        (1) 当前页的各种方法事件都写在 methods: {} 中
        (2) created() {}, 中的事件 首次进入执行一次
        (3) onShow() {}, 中的事件 进入页面就执行

    <!-- 8、一个小demo -->
        <template>
            <epii-loading>
                <view style="height:1upx;"></view>
                <view class="geyixia">{{xuanran}}</view>
                <view class="geyixia" @click="dianji">这是个点击事件</view>
                <view class="geyixia">
                    <text>这是个循环</text>
                    <view v-for="(item,index) in shuzu" :key="index" >
                        <text>{{item}}</text>
                    </view>
                </view>
                <view class="geyixia" @click="getdata">获取项目组列表</view>
                <view class="geyixia" v-if="data.length">
                    这就是接口的数据
                    <view v-for="(item,index) in data">
                        <text>{{item.title}}</text>
                    </view>
                </view>
                
            </epii-loading>
        </template>
        
        <script>
        export default {
            data() {
                return {
                    xuanran:"普通的渲染数据",
                    shuzu:["刘备","关羽","张飞"],
                    data:[]
                };
            },
            created() {
                setTimeout(()=>{
                    this.show()	
                },1000)
            },
            onShow() {},
            onLoad(options) {},
            methods: {
                // 这是个点击事件
                dianji(){
                    console.log("点击了")
                },
                // 获取项目组列表 
                async getdata(){
                    try {
                        let data = await Eapp.http.loading.post(‘pm_project@group‘, {
                        });
                        this.data = data
                        this.show(); //关掉转圈儿
                        console.log(data)
                    } catch (e) {
                        // 接口错误执行的处理
                        Eapp.ui.toast.text(e);
                    }
                }
            }
        };
        </script>
        
        <style scoped lang="less">
            .geyixia{
                width:80%;
                text-align: center;
                margin:0 auto;
                background-color: pink;
                margin-top:20upx;
            }
        </style>

  

文始小demo

标签:color   demo   图片上传   需要   rip   本地   view   基础   tab   

原文地址:https://www.cnblogs.com/xiaoyaolang/p/14478706.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!