【重点突破】—— UniApp微信小程序开发教程学习Three

一、实战

  • HBuilderX:在微信小程序中运行页面,需要设置->安全 开启微信小程序服务端口,HBuilder工具->设置->配置程序路径
  1. 网络请求、模板语法、打开页面、页面传参
  2. 列表  api:  https://unidemo.dcloud.net.cn/api/news
    - 返回数据格式
    - id 新闻id 如: 72980
    - title 标题
    - created_at 创建时间
    - author_avatar 图标
  3. 详情  地址:
    https://unidemo.dcloud.net.cn/api/news/36kr/ + id  ( id 为新闻id,上个页面传过来的)  
  4. 使用 rich-text 【富文本组件来展示新闻内容】
    <rich-text class="richText" :nodes="strings" ></rich-text>
  5. pages:新建页面 -> 就会多一个文件夹 里面包含一个 同名.vue文件
  • 网络请求 api
    onLoad: function() {
    快捷写法 -> ureq
    }

    请求列表数据:

    onLoad:function(){
    uni.request({
    url: 'https://unidemo.dcloud.net.cn/api/news',
    method: 'GET',
    data: {},
    success: res => {
    console.log(res)
    },
    fail: () => {},
    complete: () => {}
    });
    }
  • 页面跳转(打开页面) - 两种方式
    //  ①   <navigator url=""></navigator>
    
    //  ②   @tap="openinfo"       //监听单击事件
    
    //       快捷写法 : me -> 选择 Vue methods方法代码块
    
    //       unav -> 选择 uni.navigateTo({ 代码块 })
    
    methods: {
    openinfo() {
    uni.navigateTo({
    url: '../info/info'
    });
    }
    },
  • 页面传参  ——  :data-变量名称="" 进行附加信息的传递,保存在监听事件的 e.currentTarget.dataset.变量名称
    //  index.vue 列表页
    
    :data-newsid="item.post_id"
    
    methods: {
    openinfo(e) {
    var newsid = e.currentTarget.dataset.newsid;
    //console.log(newsid)
    uni.navigateTo({
    url: '../info/info?newsid='+newsid
    });
    }
    }, // info.vue 详情页 // onLoad生命周期:页面加载成功,获取传递的参数,保存在onLoad方法的 e.变量名称 中 onLoad: function(e){
    console.log(e) //{newsid: "5219628" }
    }  
  • 数据加载中 
    uni.showLoading({
    title: "加载中...."
    })  
  • 加载完成后
    uni.hideLoading()  
  • 补充知识点: pages.json -- pages 页面路由数组
    "pages": [
    // pages数组中第一项表示应用启动页,参考:
    // https://uniapp.dcloud.io/collocation/pages
    {
    "path": "pages/index/index",
    "style": {
    "navigationBarTitleText": "uni-app"
    }
    } ,
    //在使用HBuilderX新建info页面文件夹时,自动创建
    {
    "path" : "pages/info/info",
    "style" : {}
    }
    ],
  • 开发小技巧:condition 设置模式配置--便于调试时,固定打开某一页面
    "condition": {       //模式配置,仅开发期间生效
    "current": 0, //当前激活的模式(list 的索引项)
    "list": [{
    "name": "test", //模式名称
    "path": "pages/info/info", //启动页面,必选
    "query": "newsid=5158607" //启动参数,在页面的onLoad函数里可得到
    }]
    }
  • ctrl + r 微信开发者工具-运行到页面

二、白话uni-app —— html、vue、小程序的区别

  • 网络模型:c/s ,前后端分离,通过ajax获取json数据
  • 文件类型:.vue文件
  • 文件内代码架构:template、script、style是并列的一级节点
  • 外部文件引用方式:es6写法,import引入外部的js模块或css
  • 组件/标签变化:以前是html标签,现在是小程序组件
  1. div 改成 view
  2. span、font 改成 text
  3. a 改成 navigator
  4. img 改成 image
  5. input 还在,但type属性改成了confirmtype
  6. form、button、checkbox、radio、label、textarea、canvas、video 这些还在。
  7. select 改成 picker
  8. iframe 改成 web-view
  9. ul、li没有了,都用view替代
  10. audio 不再推荐使用,改成api方式
  • https://uniapp.dcloud.io/api/media/background-audio-manager?id=getbackgroundaudiomanager
  • 其实老的HTML标签也可以在uni-app里使用,uni-app编译器会在编译时把老标签转为新标签,比如把div编译成view。但不推荐这种用法,调试H5端时容易混乱,基于元素的选择器也会出问题
  • 新增手机端常用的新组件:
  1. scroll-view 可区域滚动视图容器
  2. swiper 可滑动区域视图容器
  3. icon 图标
  4. rich-text 富文本(不可执行js,但可渲染各种文字格式和图片)
  5. progress 进度条
  6. slider 滑块指示器
  7. switch 开关选择器
  8. camera 相机
  9. live-player 直播
  10. map 地图
  • cover-view 可覆盖原生组件的视图容器。
  • uni-app的非h5端的video、map、canvas、textarea是原生组件,层级高于其他组件。
  • 如需覆盖原生组件,比如在map上加个遮罩,则需要使用cover-view组件
  • js变化:
  1. 运行环境从浏览器变成v8引擎。浏览器专用的window、document、navigator、location对象,包括cookie等存储,只有在浏览器中才有,app和小程序都不支持。但app和小程序支持web-view组件,里面可以加载标准HTML,这种页面仍然支持浏览器专用对象window、document、navigator、location。
  2. 数据绑定模式变化从DOM操作变成Vue的MVVM模式
  3. 注意: ① 小程序的数据绑定参考了vue,但自己修改了一些。在uni-app中只支持标准的vue,不支持小程序的数据绑定语法。②小程序里的setData在uni-app里并不存在,因为vue是自动双向数据绑定的。直接通过赋值方式修改数据,如果数据绑定到界面上,界面会自动更新渲染
  • Api变化
  1. alert、confirm 改成 uni.showmodel
  2. ajax 改成 uni.request
  3. cookie、session 没有了,local.storage 改成 uni.storage
  • uni-app的js api还有很多,但基本就是小程序的api,把wx.xxx改为uni.xxx即可
  • CSS变化:
  1. 不支持*选择器、元素选择器里body改为page
  2. 默认单位 upx、默认布局 flex布局
  3. 注意背景图和字体文件尽量不要大于40k。会影响性能。
  • 如果非要大于40k,需放到服务器侧远程引用或base64后引入,不能放到本地作为独立文件引用。
  • 在小程序里,其实小于40k的文件在css里也无法引用,uni-app编译器在编译时自动做了处理,把小于40k的文件编译为base64方式。
  • 工程结构和页面管理:
  1. 每个可显示的页面,都必须在 pages.json 中注册。pages.json类似与小程序的app.json,是配置文件。
  2. 与Vue相比:没有Vue的路由,路由都在pages.json中管理。
  • 与小程序相比: 原来app.json被一拆为二。
  1. 页面管理,被挪入了uni-app的pages.json;非页面管理,挪入了manifest.json。
  2. 原来的app.js和app.wxss被合并到了app.vue中
  • uni-app的首页,是在pages.json里配的,page节点下第一个页面就是首页。一般在/pages/xx的目录下。
  • 页面提供了原生的导航栏和底部tabbar,但必须在pages.json中配置。

三、基于Promise封装uni-app的request方法,实现类似axios形式的请求

  • 拦截器只能自己封装,uni-app仅提供网络请求的方法和中断连接的方法;
  • uni-app内置了flyio:https://wendux.github.io/dist/#/doc/flyio/readme
    var Fly=require("flyio/dist/npm/wx");
    var fly=new Fly; var server = "https://uniapp.dcloud.io/update";
    var req = {"appid":"123","version":"123"}; fly.request(server, req, {
    method:"get",
    timeout:5000 //超时设置为5s
    }) .then( d=>{
    console.log("request result:",d)
    }) .catch(
    (e) => console.log("error", e)
    );
  • 方法二【使用unifly代替uni-request】:unifly支持uni-request所有功能,而且更具有模块化思想。(uni-request不再维护,但历史版本仍然可以使用)
  1. uni-request 教程:https://www.liangzl.com/get-article-detail-39769.html
  2. uniFly 教程: https://www.jianshu.com/p/2729ac395cf5
  • 基于fly.js:是一个类似于axios的工具,可以设置拦截等需求

注:以上内容来自UniApp官网推荐教程

上一篇:微信小程序开发教程,大多数人都搞错的八个问题


下一篇:Git仓库创建和文件提交