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

付振声 發表於 2019-11-28 15:47:00

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

一、实战
<ul>
<li>HBuilderX：在微信小程序中运行页面，需要设置->安全开启微信小程序服务端口，HBuilder工具->设置->配置程序路径</li>
</ul>
<ol>
<li>网络请求、模板语法、打开页面、页面传参</li>
<li>列表  api:  https://unidemo.dcloud.net.cn/api/news
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">- 返回数据格式
- id 新闻id 如： 72980
- title 标题
- created_at 创建时间
- author_avatar 图标</pre>
</div>
</li>
<li>详情  地址：
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">https://unidemo.dcloud.net.cn/api/news/36kr/ + id( id 为新闻id，上个页面传过来的）　　</pre>
</div>
</li>
<li>使用 rich-text 【富文本组件来展示新闻内容】
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"><rich-text class="richText" :nodes="strings" ></rich-text></pre>
</div>
</li>
<li>pages：新建页面 -> 就会多一个文件夹里面包含一个同名.vue文件</li>
</ol>
<ul>
<li>网络请求 api
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">onLoad: function() {
 快捷写法 -> ureq
}
</pre>
</div>
请求列表数据：
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">onLoad:function(){
 uni.request({
 url: 'https://unidemo.dcloud.net.cn/api/news',
 method: 'GET',
 data: {},
 success: res => {
 console.log(res)
 },
 fail: () => {},
 complete: () => {}
 });
}</pre>
</div>
</li>
<li>页面跳转（打开页面） - 两种方式
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">//① <navigator url=""></navigator>

//② @tap="openinfo" //监听单击事件

// 快捷写法 : me -> 选择 Vue methods方法代码块

// unav -> 选择 uni.navigateTo({ 代码块 })

methods: {
openinfo() {
 uni.navigateTo({
 url: '../info/info'
 });
 }
},</pre>
</div>
</li>
<li>页面传参  ——  :data-变量名称="" 进行附加信息的传递，保存在监听事件的 e.currentTarget.dataset.变量名称
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">//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" }
}　　</pre>
</div>
</li>
<li>数据加载中 
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">uni.showLoading({
 title: "加载中...."
})　　</pre>
</div>
</li>
<li> 加载完成后
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">uni.hideLoading()　　</pre>
</div>
</li>
<li>补充知识点： pages.json -- pages 页面路由数组
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">"pages": [
 // pages数组中第一项表示应用启动页，参考：
 // https://uniapp.dcloud.io/collocation/pages
{
 "path": "pages/index/index",
 "style": {
 "navigationBarTitleText": "uni-app"
 }
 } ,
 //在使用HBuilderX新建info页面文件夹时，自动创建
{
 "path" : "pages/info/info",
 "style" : {}
 }
],</pre>
</div>
</li>
<li>开发小技巧：condition 设置模式配置--便于调试时，固定打开某一页面
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">"condition": { //模式配置，仅开发期间生效
 "current": 0, //当前激活的模式（list 的索引项）
 "list": [{
 "name": "test", //模式名称
 "path": "pages/info/info", //启动页面，必选
 "query": "newsid=5158607" //启动参数，在页面的onLoad函数里可得到
 }]
}</pre>
</div>
</li>
<li> ctrl + r 微信开发者工具-运行到页面</li>
</ul>
 
二、白话uni-app —— html、vue、小程序的区别
<ul>
<li>网络模型：c/s ，前后端分离，通过ajax获取json数据</li>
</ul>
<ul>
<li>文件类型：.vue文件</li>
</ul>
<ul>
<li>文件内代码架构：template、script、style是并列的一级节点</li>
</ul>
<ul>
<li>外部文件引用方式：es6写法，import引入外部的js模块或css</li>
</ul>
<ul>
<li>组件/标签变化：以前是html标签，现在是小程序组件</li>
</ul>
<ol>
<li>div 改成 view</li>
<li>span、font 改成 text</li>
<li>a 改成 navigator</li>
<li>img 改成 image</li>
<li>input 还在，但type属性改成了confirmtype</li>
<li>form、button、checkbox、radio、label、textarea、canvas、video 这些还在。</li>
<li>select 改成 picker</li>
<li>iframe 改成 web-view</li>
<li>ul、li没有了，都用view替代</li>
<li>audio 不再推荐使用，改成api方式</li>
</ol>
<ul>
<li>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">https://uniapp.dcloud.io/api/media/background-audio-manager?id=getbackgroundaudiomanager</pre>
</div>
</li>
<li> 其实老的HTML标签也可以在uni-app里使用，uni-app编译器会在编译时把老标签转为新标签，比如把div编译成view。但不推荐这种用法，调试H5端时容易混乱，基于元素的选择器也会出问题</li>
<li>新增手机端常用的新组件：</li>
</ul>
<ol>
<li>scroll-view 可区域滚动视图容器</li>
<li>swiper 可滑动区域视图容器</li>
<li>icon 图标</li>
<li>rich-text 富文本（不可执行js，但可渲染各种文字格式和图片）</li>
<li>progress 进度条</li>
<li>slider 滑块指示器</li>
<li>switch 开关选择器</li>
<li>camera 相机</li>
<li>live-player 直播</li>
<li>map 地图</li>
</ol>
<ul>
<li> cover-view 可覆盖原生组件的视图容器。</li>
</ul>
<ul>
<li> uni-app的非h5端的video、map、canvas、textarea是原生组件，层级高于其他组件。</li>
</ul>
<ul>
<li> 如需覆盖原生组件，比如在map上加个遮罩，则需要使用cover-view组件</li>
</ul>
<ul>
<li>js变化： </li>
</ul>
<ol>
<li>运行环境从浏览器变成v8引擎。浏览器专用的window、document、navigator、location对象，包括cookie等存储，只有在浏览器中才有，app和小程序都不支持。但app和小程序支持web-view组件，里面可以加载标准HTML，这种页面仍然支持浏览器专用对象window、document、navigator、location。</li>
<li>数据绑定模式变化从DOM操作变成Vue的MVVM模式</li>
<li> 注意： ① 小程序的数据绑定参考了vue，但自己修改了一些。在uni-app中只支持标准的vue，不支持小程序的数据绑定语法。②小程序里的setData在uni-app里并不存在，因为vue是自动双向数据绑定的。直接通过赋值方式修改数据，如果数据绑定到界面上，界面会自动更新渲染</li>
</ol>
<ul>
<li>Api变化</li>
</ul>
<ol>
<li>alert、confirm 改成 uni.showmodel</li>
<li>ajax 改成 uni.request</li>
<li>cookie、session 没有了，local.storage 改成 uni.storage</li>
</ol>
<ul>
<li> uni-app的js api还有很多，但基本就是小程序的api，把wx.xxx改为uni.xxx即可</li>
</ul>
<ul>
<li>CSS变化： </li>
</ul>
<ol>
<li>不支持*选择器、元素选择器里body改为page</li>
<li>默认单位 upx、默认布局 flex布局</li>
<li>注意背景图和字体文件尽量不要大于40k。会影响性能。</li>
</ol>
<ul>
<li>如果非要大于40k，需放到服务器侧远程引用或base64后引入，不能放到本地作为独立文件引用。</li>
</ul>
<ul>
<li>在小程序里，其实小于40k的文件在css里也无法引用，uni-app编译器在编译时自动做了处理，把小于40k的文件编译为base64方式。</li>
</ul>
<ul>
<li>工程结构和页面管理： </li>
</ul>
<ol>
<li>每个可显示的页面，都必须在 pages.json 中注册。pages.json类似与小程序的app.json，是配置文件。</li>
<li>与Vue相比：没有Vue的路由，路由都在pages.json中管理。</li>
</ol>
<ul>
<li>与小程序相比：原来app.json被一拆为二。</li>
</ul>
<ol>
<li>页面管理，被挪入了uni-app的pages.json；非页面管理，挪入了manifest.json。</li>
<li> 原来的app.js和app.wxss被合并到了app.vue中</li>
</ol>
<ul>
<li>uni-app的首页，是在pages.json里配的，page节点下第一个页面就是首页。一般在/pages/xx的目录下。</li>
<li>页面提供了原生的导航栏和底部tabbar，但必须在pages.json中配置。</li>
</ul>
 
三、基于Promise封装uni-app的request方法，实现类似axios形式的请求
<ul>
<li>拦截器只能自己封装，uni-app仅提供网络请求的方法和中断连接的方法；</li>
</ul>
<ul>
<li>uni-app内置了flyio：https://wendux.github.io/dist/#/doc/flyio/readme
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">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)
);</pre>
</div>
</li>
</ul>
 
<ul>
<li>方法一uniapp 数据网络请求封装以及通用使用【教程】：https://blog.csdn.net/Neil_1993/article/details/90483790</li>
</ul>
<ul>
<li>方法二【使用unifly代替uni-request】：unifly支持uni-request所有功能，而且更具有模块化思想。（uni-request不再维护，但历史版本仍然可以使用）</li>
</ul>
<ol>
<li>uni-request 教程：https://www.liangzl.com/get-article-detail-39769.html</li>
<li> uniFly 教程： https://www.jianshu.com/p/2729ac395cf5</li>
</ol>
<ul>
<li>基于fly.js：是一个类似于axios的工具，可以设置拦截等需求</li>
</ul>
<ul>
<li> Fly官网：https://wendux.github.io/dist/#/doc/flyio/readme</li>
</ul>
<ul>
<li>对比axios：https://wendux.github.io/dist/#/doc/flyio/compare</li>
</ul>
<hr>
注：以上内容来自UniApp官网推荐教程
 

</div>
<div id="MySignature" role="contentinfo">
越是迷茫、浮躁的时候，保持冷静和耐心，尤为重要 
来源：https://www.cnblogs.com/ljq66/p/11950495.html

頁: [1]

琼殿技术论坛's Archiver

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