zoukankan      html  css  js  c++  java
  • uni-app学习笔记

    1进官网下载HBuilderX  官网https://www.dcloud.io/hbuilderx.html

    2,创建项目 (快速创建文件快捷键ctrl+n)

    3、ctrl+r 运行项目

    4、页面跳转有两种方法:

    1)一种是标签

    <navigator url="../info/info"></navigator>

    2)js  通过点击事件

    @ @tap="GoInfo"

    uni.navigateTo({
    url: '../info/info',
    success: res => {}

    });

    跳转的页面要在pages.json里配置路径

    5、传递每条新闻独有的id 或许新闻内容 (父页面)

    :data-newsId = "item.post_id"  

    js

    var newsid = e.currentTarget.dataset.newsid  (取id)

    uni.navigateTo({
    url: '../info/info?newsid='+newsid,
    success: res => {}

    });

    6、子页面根据id获取新闻内容

    e.newsid

    url: 'xxx/api/news/36kr/'+e.newsid,

    7,、如果新闻内容后台给的是html页面

    我们需要用<rich-text :nodes="strings"></rich-text>

    nodes的参数有Array / String

    8、新闻内容比较多 为了提高客户体验度可使用

      uni.showLoading (一进页面显示)
     uni.hideLoading(数据加载完成隐藏)

     
    <template>
        <view class="content">
            <view class="title">
                {{title}}
            </view>
            <view class="artcle-content">
                <rich-text :nodes="strings"></rich-text>
            </view>
        </view>
    </template>
    data() {
                return {
                    title:'',
                    strings:''
                };
            },
            onLoad(e) {
                uni.showLoading({
                    title: '数据加载中',
                    mask: false
                });
                uni.request({
                    url: 'xxx/api/news/36kr/'+e.newsid,
                    method: 'GET',
                    data: {},
                    success: res => {
                        console.log(res)
                        this.title = res.data.title;
                        this.strings = res.data.content
                    uni.hideLoading()
                    },
                
                });
            }

    9、如何安装插件

    工具- 插件安装 - 选择需要的插件

    2019-10-8

    10、若不想要导航栏配置

     "navigationStyle":"custom",
        "path": "pages/new/new",
                "style": {
                    "navigationStyle":"custom",
                    "enablePullDownRefresh": true
                }

    11,如何使用组件插件

    将组建插件的代码复制到自己的项目中即可

    12,轮播图

  • 相关阅读:
    为什么企业发展离不开ERP系统?
    PS Cloud:Odoo在中国唯一的SaaS营销平台
    Ps cloud里的CRM软件到底强在何处?
    PS Cloud备受关注的六大优点
    odoo的 CRM系统为何如此受欢迎
    iOS :Object-C 语言merge两个字典对象
    iOS:swift :可选类型
    iOS循环引用
    swift 3.0基本数据语法
    配置React Native环境
  • 原文地址:https://www.cnblogs.com/zfdbk/p/11635813.html
Copyright © 2011-2022 走看看