小程序基础开发

2019-06-14 本文已影响0人姬歌

小程序目录结构

'./'表示当前目录（非my_jsdoc.js，而是‘目录’！），'../'表示上一级目录。
示例中，第一个"../"表示当前目录（launchPage）的上一级目录（Logins），
第二个'../'表示再往上一级目录到（pages），
第三个'../'表示pages的上级目录，即根目录，
然后根目录下寻找'/utils'目录，最终找到目标文件utils.js；
在上面的相对路径中，还可以在开头加上'./'，表示当前目录。但这个'./'可以省略，因为默认就是从当前目录开始的。

扩展运算符 ... 可以将一个对象展开

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      c: 3,
      d: 4
    }
  }
})

最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。

事件处理函数bindtap

在视图中定义了按钮单击事件，并绑定处理该单击事件的函数，则需要在Page中定义该事件函数。

wxml:
<view bindtap="viewTap">单击我</view>
<--  catchtap跟bindtap的区别：catchtap可以阻止冒泡事件！只有当前view响应点击事件，事件不会穿透到下层视图    -->
<view catchtap="viewTap2">单击我</view>
Page:
Page({
    viewTap: function() {
       console.log('hello, tap me!')
   },
    viewTap2: function() {
       console.log('hello, tap me 2!')
   }
})

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可用于：

内容
<view> {{ message }} </view>
组件属性(需要在双引号之内)
<view id="item-{{id}}"> </view>
...

见官网：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/data.html

$\color{blue}{.js数据同步到.wxml}$ ;.js需要先定义属性；其中data是创建页面自动生成的，data是关键字，是页面的数据对象；当前所有数据需要定义在data对象内，作为属性。如下例的someText
.js

Page({
    data: {
       someText: "Morning, Zark!",
       myColor: '#ff0000',
   },
   someFunction: function() {
      this.setData({someText:"Good night,Zark!"})
  }
})

.wxml:

    <text style='color:{{myColor}};'>{{someText}}</text>

数据的引用：上面一行代码展示了在标签属性（style，以及其他属性）中，和标签的值中，分别是如何引用.js中定义的属性的。在标签属性中，引用需要包含在引号内；作为标签的值，则不可以加引号。

.js文件中如果直接用this.data.someText="Good night,Zark!"，是不能改变<text>内显示的内容的，
$\color{red}{必须用}$ this.setData({someText:"Good night,Zark!"})，才能使UI和数据同步刷新！

$\color{blue}{wx:if条件渲染}$ ;

<view wx:if="{{num > 100}}">大于100</view>
<view wx:elif="{{num > 30}}">大于30</view>
<view else>小于等于30</view>

$\color{blue}{block，wx:if 条件渲染}$ ;

//block什么也不干，只是相当于一个大括号括起来的代码块，方便对一块代码进行统一管理。
<block wx:if="{{condition}}">
  <view>show view1</view>
  <view>show view2</view>
</block>

$\color{blue}{wx:for 列表渲染; 相当于iOS里的}$ $\color{red}{UITableView}$ 或安卓里的 $\color{red}{ListView}$

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

//使用 wx:for-item 可以指定数组当前元素的变量名，
//使用 wx:for-index 可以指定数组当前下标的变量名：

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

text换行问题
去除中文后面空的占位，word-break: keep-all;
中文字符不再上浮，接下来要解决的是换行的问题word-wrap: break-word;
https://blog.csdn.net/qq_37465264/article/details/80234913

列表渲染：多数组数据提取，标记点击事件id
这里的'id'可以是任何自定义的名称，如，.wxml可以是data-row='{{index}}'；
对应的，在.js中就要用e.currentTarget.dataset.row取值

.js

data: {
    iconUrls: ["../../../../img/personalCenter/purse_account_detail.png", "../../../../img/personalCenter/purse_cashout_record.png"],
    listTitles: ["账户明细", "提现记录"]
  },
...
  cellClicked: function (e) {
    let index = e.currentTarget.dataset.id;
    console.log(e.currentTarget.dataset.id)

    if (index == 0) {
      wx.navigateTo({
        url: './accountDetail/accountDetail',
      })
    }else if (index == 1) {

    }
  },

.wxml

<view class='cell' wx:for="{{listTitles}}" wx:for-index="index" bindtap='cellClicked' data-id='{{index}}'>
      <view class='cellContent'>
        <view class='cellLeftView'>
          <image class='cellIcon' src="{{iconUrls[index]}}"></image>
          <text>{{item}}</text>
        </view>
        <image class='cellArrow' src='../../../../img/personalCenter/list_arrow_right.png'></image>
      </view>
      <view class='cellSp'></view>
    </view>

条件渲染

效果：（列表背景不一样）

条件渲染

1 、新建文件 rankingBgTool.wxs，内容如下（小程序内view背景图片只能用base64编码，网上随便搜图片转base64）：

 var backgroundUrlGenerator = {
  urlforRanking: function(row) {
    var url = ''
    if (row == 0) {
      url = 'data:image/png;base64,iVBORw......5ErkJggg=='
    } else if (row == 1) {
      url = 'data:image/png;base64,iVBORw0KG.........Jggg=='
    } else {
      url = 'data:image/png;base64,iVBORw0KGgo.........Jggg=='
    }
    return url;
  }
}
module.exports = {
  urlforRanking: backgroundUrlGenerator.urlforRanking
}

2、然后在invitationDetail.wxml文件中导入（顶部写就可以，不用包含在其他wxml标签内），其中的'urlGen'是可任意自定义别名，src必须是相对路径！！不要忘了关闭标签的斜杠。

<wxs module='urlGen' src='./rankingBgTool.wxs'/>
使用：
<scroll-view  scroll-y class='tableView'>
  <view class='cell' wx:for='{{friendArray}}' wx:for-item='cellDic2' wx:for-index='row'>
      <view class='cellContentView' style='background-image:url({{urlGen.urlforRanking(row)}});'>
      ...
      </view>
    </view>
</scroll-view>

类似的，还可以用.wxs工具对渲染的数据加工，比如对小数点位数进行控制等。

.wxs文件日期处理

daysRemain: function (dateString) {
//dateString format: yyyy-MM-dd HH:mm:ss
    var date_apply = getDate(dateString)
    var interval_date = date_apply.getTime()
    var interval_after3d = interval_date + (24*60*60*1000)*3
    var threeDaysAfterApplay = getDate(interval_after3d)
    var today = getDate()
    
    var interval_today = today.getTime()
    var interval = interval_today - interval_date
    //含小数，如果传入的是过去的时间，则结果为正数，否则为(负数 || 0)
    var days = interval/(24*60*60*1000)
  
  },

因为小程序限制总大小<2M（电脑上无限制，但上传就有限制），所以，本地高清大图就不要想了，我都是用宽度400像素以下的图片，质量当然一般，但也过得去；能用代码的就用代码（比如纯色按钮，渐变色liner-gradient按钮等）

回调失败信息展示（err.errMsg）

fail: function (err) {
        console.log(err)
        wx.showToast({
          icon: 'none',
          title: err.errMsg,
        })
      },

. text插入空格
两种方式

<text space="ensp">这是空格       哈</text>
<text decode="{{true}}">你好，&ensp;&ensp;&ensp;哈哈哈</text>

小程序基础开发

$\color{blue}{wx:for 列表渲染; 相当于iOS里的}$ $\color{red}{UITableView}$ 或安卓里的 $\color{red}{ListView}$

猜你喜欢

热点阅读