微信开发--微信小程序(四)

生南星

发布于 2019-07-22 06:40:12

20.9K00

代码可运行

文章被收录于专栏：生南星生南星

运行总次数：0

代码可运行

一：https部署以及设置合法域名。

1.小程序向后台请求接口必须使用https，包括web-view里的网页，如果项目中有用到web socket，那么也必须使用wss协议。https证书一般会用第三方的。比如阿里云的。 2.在微信小程序管理后台，还需要配置合法域名。当然，在后台还没有部署https之前，我们也可以进行开发调试，只需要设置不校验合法域名，https证书等即可。步骤 : 工具--项目详情--不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书

二：post请求，json数据格式转换

当我们向后台进行post请求的时候，当我们的传输数据的格式为json的时候，需要在 header 里设置如下代码:

//post请求
'content-type': 'application/x-www-form-urlencoded' 
//get请求
'content-type': 'application/json'

三: 条件渲染&&列表渲染

条件渲染以及列表渲染作为数据驱动视图的重要部分，值得一提

1.条件渲染的wx:if以及hidden

wx:if会产生局部渲染，销毁条件块（或者重新渲染）
hidden就是直接控制display block/none了

所以官网给出的结论是

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

2.列表渲染

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" wx:key="*this">
  {{idx}}: {{itemName.message}}
</view>

这里其他for,index，item这些循环渲染基本的东西就不具体说了，谈谈这个wx:key

假如我们更新array数组，预期来说视图重新渲染，但是我们假如只是在array中push更多的元素，我们的想法应该是重新排序，不去重复创建视图原来已经有的元素，这里为了标识item，我们就可以用wx:key，有助于提升渲染的效率，并且能够保持状态（如<input/> 中的输入内容，<switch/> 的选中状态).

四：微信小程序开发单位问题

我们再开发iOS的时候默认使用pt；在开发Android的时候，我们使用dp,sp等单位；在开发web的时候使用em,rem等单位。但是在我们的小程序里我们只要记住rpx这一个单位就好了，这样我们开发出来的小程序就完美的运行在各式各样屏幕的手机上了。no!no!no，也是有特殊情况的，有时候我们就不能使用rpx，比如使用到canvas的时候，那么就只能使用px为单位，那么，如何做到屏幕适配呢？我的做法是使用wx.getSystemInfo这个api来获取到运行手机的屏幕的宽度和高度，那么根据UI的标注图的屏幕宽高，就可以换算出一个比例来了。

五：wxss文件中不支持本地图片

如果我们有一个需求：添加一张背景图，根据web开发思维，肯定是在background-image:中设置本地图片的路径，但是在微信小程序上这是行不通的。微信小程序的background-image只支持网络图片。

六：this.setData和直接赋值的区别

这两者都可以造成data里数据的改变，但是this.setData赋值才会造成wxml里面数据的改变，也就是同步更新渲染界面，而直接赋值只会让data里数据发生变化，但是界面并不会改变。看代码：

//wxml文件
<text>我的名字是{{name}}</text>

//js文件
//数据源
data: {
    name:'',
  },

onLoad: function (options) {
    this.data.name='张三'//只会使data里数据发送改变，但是界面不会发生改变，界面仍显示”我的名字是“
    console.log(this.data.name)//打印出来的结果是”张三“

    this.setData({
      name: '张三'
    })
    //此时，界面数据才会发生改变，变成”我的名字是张三“
  },

七：微信小程序不能操作DOM树

web开发中，可以使用getElementById()访问documnent中的某一个元素，顾名思义，就是通过id来获取元素，但是微信小程序没有windows对象，所以小程序不能直接操作dom树，小程序采用的都是mvvm的设计模式，数据双向绑定。类似于vue.js的写法。

八: swiper自定义圆点样式

<view class="wrap"> 
  <swiper class="swiper_book_img" current="{{currentSwiper}}" bindchange="swiperChange"> 
    <block wx:for="{{banner}}" wx:key="unique"> 
      <swiper-item class="slide_img"> 
        <image src="{{item.picUrl}}" class="slide-image" width="100%" height="110" ></image> 
      </swiper-item> 
     </block> 
    </swiper> 
      <!--重置小圆点的样式 --> 
      <view class="dots"> 
        <block wx:for="{{banner}}" wx:key="unique"> 
          <view class="dot{{index == currentSwiper ? ' active' : ''}}" id="{{index}}"></view> 
        </block> 
      </view> 
  </view>

js:
data: {
   // tab切换 
    currentSwiper: 0
    },
swiperChange: function (e) {
 this.setData({
  currentSwiper: e.detail.current
 })
},

wxss:

/*用来包裹所有的小圆点 */ 
.dots { 
  display: flex; 
  justify-content:center; 
  flex-direction: row; 
  margin:22rpx auto; 
} 
/*未选中时的小圆点样式 */ 
.dot { 
  width: 10rpx; 
  height: 10rpx; 
  border-radius: 50%; 
  margin-right: 18rpx; 
  background-color: #969FA9; 
  opacity: 0.5; 
} 
/*选中以后的小圆点样式 */ 
.active { 
  width: 20rpx; 
  height: 10rpx; 
  border-radius:20rpx; 
  background-image: linear-gradient(-90deg, rgba(150,159,169,0.50) 24%, #F5F7FA 100%); 
  border-radius: 100px; 
}

九: 微信小程序获取当前页面的url##

使用getCurrentPages可以获取当前加载中所有的页面对象的一个数组，数组最后一个就是当前页面

//获取加载的页面
var pages = getCurrentPages() 
//获取当前页面的对象
var currentPage = pages[pages.length-1] 
//当前页面url
var url = currentPage.route 
//如果要获取url中所带的参数可以查看options
var options = currentPage.options

可以写成工具函数放到utils中：

/获取当前页url/
function getCurrentPageUrl(){
//获取加载的页面
var pages = getCurrentPages() 
 //获取当前页面的对象
var currentPage = pages[pages.length-1]
//当前页面url
var url = currentPage.route 
return url
}

获取当前页带参数的url

function getCurrentPageUrlWithArgs(){
//获取加载的页面
var pages = getCurrentPages() 
//获取当前页面的对象
var currentPage = pages[pages.length-1] 
//当前页面url
var url = currentPage.route 
//如果要获取url中所带的参数可以查看options
var options = currentPage.options 
}

module.exports = {
getCurrentPageUrl: getCurrentPageUrl,
getCurrentPageUrlWithArgs: getCurrentPageUrlWithArgs
}

拼接url的参数

var urlWithArgs = url + '?'
for(var key in options){ 
  var value = options[key] urlWithArgs += key + '=' + value + '&' 
} 
urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length-1) 
return urlWithArgs

十: scroll组件

scroll组件绑定了 bindscroll="scroll"方法，没定义这个方法时，会出现这样的错误提示，但不影响效果，滚动正常，去掉即可

<scroll-view scroll-y="true" bindscrolltoupper="refresh" bindscrolltolower="loadMore" lower-threshold="50" bindscroll="scroll">

十一: 微信小程序 —— button按钮去除border边框

在开发微信小程序组件框架时，我遇到了一个问题，微信小程序中的button组件有特定的css，背景可以用“background：none”去掉，但是边框再用“border : none”去掉就不可以了，这也是微信小程序与h5的不同之处。

但是在微信小程序中使用:after选择器就可以实现这一功能。

使用 button::after{ border: none; } 来去除边框

十二: tabBar 底部菜单切换，数据没更新

推荐切换到书架页，页面打开时只执行一次onLoad生命周期，应该是每次点击切换都会执行onLoad，导致数据不同步。解决方法

onShow:function(){ 
  this.onLoad(); 
},

十三: 微信小程序动画中如何将rpx转化px

1.通过API可获取的值：

在 iPhone6 下运行：

var systemInfo = wx.getSystemInfoSync();
// 输出 375（单位 px）
console.log(systemInfo.windowWidth);

在 iPhone6 Plus 下：

var systemInfo = wx.getSystemInfoSync();
// 输出 414 （单位 px）
console.log(systemInfo.windowWidth);

2、px与rpx之间转换的公式：

px = rpx / 750 * wx.getSystemInfoSync().windowWidth;

动画中如何使用：

假设我想向右平移300rpx，动画代码如下：

this.animation.translateX(300/750 * systemInfo.windowWidth).step()

十三: 微信小程序－非tabBar 页面跳转到 tabBar 页面

此处注意两个关键词 “应用内的页面” 和 “tabBar页面”。 app.json文件中tabBar中注册过的tab页，即为“tabBar页面”，非tabBar中注册占用的页面即为“应用内的页面” 。请注意switchTab只能跳转到带有tab的页面，不能跳转到不带tab的页面！跳转不带tab的页面还是需要使用redirect或者navigate！

<navigator url="../index/index">跳转到新页面</navigator>
<navigator url="../index/index" open-type="redirect">在当前页打开</navigator>
//非tabBar 页面 跳转到 tabBar 页面需要设置navigator的 open-type="switchTab"
<navigator url="../index/index" open-type="switchTab">切换到首页</navigator>