小程序项目实践总结

Posted 2021-01-16 hurenweb

张小龙在朋友圈里这样解释道：小程序是一种不需要下载安装即可使用的应用，它实现了应用「触手可及」的梦想，用户扫一扫或搜一下即可打开应用。也体现了「用完即走」的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。

小程序开发资料：

• 小程序文档地址

html

• 使图片长边显示:<image src="" mode="aspectFit"></image>
• 绑定事件:<view bindtap="fna">点击</view>
• 添加链接：<navigator url="/page/a/a?b=1" hover-class="none">跳转到新页面，传值，点击时背景透明度不改变</navigator>
• 微信绿色color:#1aad16;

布局css

• 单行文字超出部分显示省略号:

<view class="text-ellipsis">当对象内文本溢出时显示省略标记（...）。当对象内文本溢出时显示省略标记（...）。
        当对象内文本溢出时显示省略标记（...）。当对象内文本溢出时显示省略标记（...）。</view>

.text-ellipsis{
    width: 700rpx;
    margin: 0 auto;
    overflow: hidden;
    white-space:nowrap;
    text-overflow: ellipsis;
    border: 1px solid #aaa;
}

js

• js跳转至导航页:wx.switchTab({url: ‘../index/index‘})
• js跳转至普通页面:wx.navigateTo({url: ‘../list/list‘})
• js阻止冒泡事件向上冒泡:

<view bindtap="outside_fn">
  <view catchtap="inside_fn"></view>
</view>

• js取得序号:
  <view data-index="{{2}}" bindtap="fna">传递序号</view>

fna: function (e) {
  var index = e.currentTarget.dataset.index;
  console.log(index);
}