全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[济南seo咨询公司服务]关于小程序

  

笔记向文章○-▪。欢迎和各位一起讨论。如果文章中有错误请指出。

 

  1.一些需要去取data中的变量的操作。我们可以运用ES6对象解构赋值来做简化。这样的方法我们不光可以在小程序中使用同样也可以用到vue里面。[济南seo咨询公司服务]

  

// 例子(小程序)
let a = this.data-△.a;
let b = this.data.b;
// ES6对象解构赋值
let {a,b} = this ○◆…☆; // vue
let {a,b} = this☆☆.data; //小程序

 

  2.小程序的 组件公共属性 hidden如果不注意看文档的朋友可能就会遗漏这个公共属性。等于css 中的display:none▽○; 可以运用于频繁切换的节点。[怎么找北京seo公司]CSS Flex 的用途详解

  

<view hidden="{{false}}"><△▪;/view>▷▽◆…;
 <!-- false 为显示 true为隐藏 -->

 

  引用官方的话来说:”一般来说■△•,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好○▪,如果在运行时条件不大可能改变则 wx:if 较好。“

  

 

  3.关于text博主刚开始写小程序的时候在wxml中使用格式化文档时踩过的坑

  

<!-- 这样的写法会出现换行的效果 -->▼▽●;
<□•○▪;text>
 SevenDream 
 SevenDream 
</text>
<!-- 如果不需要换行的效果-->◁•;
<text>SevenDream SevenDream</text>
4.关于image 有事需要渲染图片时,连续的图片会发现图中间有条白缝◆=◇▷。如果做商城方面在商品详情中它是切片的话中间有白条很不雅观。在image标签加入display:bolck就好了。
<image src="◇◆;xxx.png"…■; style="display:block"■▷;></image>

 

  

5◇=■●.关于跳转
  •  

      如果超出最大页面栈处理方法(大于10页) ,将跳转封装。

      

//utils.js
export function navigateTo(url) {
 let Type = getCurrentPages().length >☆▼;= 10 ? 'redirectTo' ▪□○: '☆▽;navigateTo'-=▼;
 return new Promise((resolve▷▲, reject) =>■★◁; {
 wx[Type]({
 url,
 success: res =>☆…▪; {
 resolve()
 },
 fail▲■▼: err =>•-; {
 reject(err)
 },
 })
 })
}
// 其他页面js
import {navigateTo} from '../☆-▪.△▷•■./utils/utils'◆▲;
navigateTo('pages/index/index')
  •  

      返回上一页时刷新(例如返回个人中心)

      

wx.switchTab({
 url: '/pages/my/my'…☆▷▲;,
 success:function(){
 var page = getCurrentPages().pop(); //当前页面
 page.onLoad(); // 调用 onload
 }})
  •  

      在返回上一页时设置上一页的的值

      

 var pages = getCurrentPages()★▲; // 获取页面栈
 var prevPage = pages[pages○★-.length - 2]=○○; //上一页
 prevPage.setData(data);
 wx.navigateBack({
 delta○…: 1
 })

 

  6.this.setData 如果想改变对象或数组中的一个

  

 //data
 data: {
 obj: {
 a-▪•: 1
 },
 array-▪: ['1'○◇;]
 },
 //改变对象
 setOBJ:function(){
 var name = '◆☆□;a'
 var obj = '=●;obj◁◁.a'
 this•★•.setData({
 [obj]:2
 })
 }◇△,
 //改变数组
 setArr: function () {
 var num = 0
 var arr = `array[${num}]`
 this.setData({
 [arr]◆◆▷◇: 2
 })
 }
  •  

      如果我们有个表单需要绑定很多bindinput▲▲▽=,运用上面的方案…◇☆,在加上data-*。不需要写很多方法了一个就够了

      

 <▼○☆◇;input data-name="name" bindinput="onInput" value="{{FromOBJ◇■.name}}">▽☆;
 <input data-name="phone" bindinput="▷◆…○;onInput"■•★; value="{{FromOBJ.phone}}"-▽;>
 <input data-name="address" bindinput="onInput"▲△●◁; value="▪…;{{FromOBJ.address}}">
// 写入
 data◆▼•:{
 FromOBJ:{
 name:''◆•○▷,
 phone:''●▷…△,
 address•■•:''
 }
 },
 onInput: function (e) {
 let name = e.currentTarget.dataset.name
 let value = e□■◇.detail★▼◆▼.value
 let valueObj = `FromOBJ.${name}`;
 this.setData({
 [valueObj]:value
 })
 }

 

  7.封装 wx.request (网上有很多关于wx○▷.requset的封装方案,这里展示楼主的封装方案)

  

//API☆….js
const HTTP_URL = 'https://xxxx.xxx.xxx/'▽◁●△;
function Request(url, data={},method='get',ContentType='application/json;charset=utf-8'☆○★;) {
 return new Promise((resolve, reject) =>-△; {
 wx.request({
 url●■: HTTP_URL.http + url,
 method: method★•▷◇,
 header: {
 'Content-Type': ContentType,
 'xxxx': '◆★□;xxxx'=▪; // 其他header头
 }▼•,
 data: data,
 success: function (res) {
 resolve(res◇=.data)
 }□●■,
 fail■…•: function (err) {
 reject(err)
 }
 })
 })
}
export function getApi(data) {
 var url = '/getapi';
 return Request(url, data)
}
// 其他页面js
import {getApi} from '☆▲.□=▲./.△■●./utils/api'●●;;
getApi({a:1,b:2}).then(res=>console▼•.log(res))◇=.catch(err=>console.log(err))

 

  8-◆.其他注意的问题

  

  •  

      如果运用到了iconfont,是一次性将文件全部放入的话0一定要把iconfont.js删除。开远市小程序制作公司真机的时候会出现报错•◇。白屏无法加载的情况●-。天门市小程序制作公司

      

  •  

      制作动画效果时注意 建议用官方的Animation Api 或者css3的animation 慎用transition

      

  •  

      最后说一个楼主遇到的坑(可能是我的处理方式不对)。在map 组件上的层级不要使用高度变化或者宽度变换的动画过度效果★▽,微信Animation Api和css3 transition Animation 属性都会卡桢,卡成ppt•-。尽量使用他们(微信api,css3)的"◆◆★;transform"来解决问题…●□。

      

 

  推荐教程:《微信小程序》

  以上就是关于小程序的详细内容,更多请关注久澳传媒编程栏目其它相关文章▽▪▷☆!

[济南seo咨询公司服务]关于小程序

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。