小程序笔记

发表于

最近因公司项目需要，我去做了一个小程序，这中间踩了很多坑，现在有时间整理了一下，一些常用到的点和踩过的坑。
个人对 js 不太熟，也是第一次做小程序，有不对的地方，欢迎指出。

1. 小程序的构成

.app.json 对小程序的全局配置
包含 所有页面路径、界面表现、网络超时时间、底部 tab 等
. project.config.json 开发配置
. 界面 .json 界面配置
. wxml 文件 界面布局
. wxss 文件 样式配置

2. Flex 布局

主要思想：通过设定容器（flex container 即伸缩容器）与子元素（flex item 即伸缩项目）的规则，使所有 view 组件在主轴（main axis） 与侧轴(cross axis) 上合理地自动分配。
详细可以参考阮一峰的博客 Flex 布局教程

3. 子元素在 view 中居中

1
2
3
display: flex;
justify-content: center;
align-items: center;

4. 字体划线

1
text-decoration:line-through

5.单边框线

1
2
3
border-top-width: 1rpx;
border-top-color: #D3D3D3;
border-top-style: solid;

6. 将 View 设为圆形

1
2
3
width: 150rpx;
height: 150rpx;
border-radius: 50%;

7. 文字省略

. 单行省略

1
2
3
4
5
text-overflow: ellipsis; 
overflow: hidden; 
white-space: nowrap;
-webkit-box-orient: vertical; 
display: block;  // 不同

. 多行省略

1
2
3
4
5
text-overflow: ellipsis; 
-webkit-line-clamp: 2;   // 行数
overflow: hidden; 
-webkit-box-orient: vertical; 
display: -webkit-box;  // 不同

单行省略和双行省略是的 display 是不一样的

8. 页面跳转传递的参数是对象，则需要利用 app.js 中 globalData 来传递；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// app.json 设置跳转数据
setGlobalData: function (obj) {
for (var n in obj) {
  this.globalData[n] = obj[n];
 }
}

// 原始页
app.setGlobalData({
    goods: this.data.goodsDetail
})

// 跳转目标页
onLoad: function (options) {
    let goods = app.globalData.goods;
}

9.改变对象的某个属性

如果是改变 data 里面的普通值，可以通过 setData 方法直接改变，但是要改变 data 里面对象的属性有所不同

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
data: {
   stepper: {
     stepper: 1,
     min:1,
     max:10
   }
 }
 
 // 改变属性值
  handleZanStepperChange: function(e){
   let str = 'stepper.stepper';
   this.setData({
     [str]: e.detail
   })
 }

10. wx:if 和 wx:for 同时使用报错

1
2
3
4
5
6
7
8
9
// 会报错
<view wx:if wx:for></view>
<view wx:else></view>

// 应该改为
<view wx:if></view>
	<block  wx:for>
	</block>
<view wx:else></view>

11. 下拉刷新样式

.头部导航栏加载

1
2
wx.showNavigationBarLoading();
wx.hideNavigationBarLoading();

. 三个点样式加载
在页面的 .json 文件中添加

1
2
"enablePullDownRefresh": true,
"backgroundTextStyle": "dark"

12. 分享、客服等功能的调起需要 Button 里 设置不同 opent-type

例子

1
2
3
4
5
6
7
8
9
10
 <button
    wx:elif="{{item.group.overplus_amount != 0}}"
    class='oreder-status' 
    open-type='share'
    data-goodsid="{{item.product.id}}"
    data-groupid="{{item.group.id}}"
    data-shareimg="{{item.product.share_image}}"
    data-sharetitle="{{item.product.share_title}}"
    data-overplus="{{item.group.overplus_amount}}">邀好友
</button>

open-type 设为 share 分享，data-xxx 是传递数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
onShareAppMessage: function (res) {
   console.log(res);
   if (res.from === 'button') {  // 判断按钮还是右上角的转发
     let groupId = res.target.dataset.groupid;
     let goodsId = res.target.dataset.goodsid;
     let shareUid = this.data.userSpecialInfo.user.uid;
     let shareImg = res.target.dataset.shareimg;
     let shareTitle = res.target.dataset.sharetitle;
     let overplusAmount = res.target.dataset.overplus;
     return {
       title: (utils.getSharePreTitle(overplusAmount, this.data.userInfo) + shareTitle) || '一起来拼团，共享周边好风光',
       imageUrl: shareImg,
       path: '/pages/details/details?goodsid=' + goodsId + '&shareUid=' + shareUid + '&groupid=' + groupId
     }
   }
 }

13. 小程序通过层级改变上一层的数据

在 Android 开发中，我们能通过 onActivityResult 和 setResult 方法解决页面带参数返回上一页的问题。但是，在小程序了，没有提供相应的方法，我们则需要通过小程序的层级数据来改变上一层的数据。

1
2
3
4
5
6
7
8
9
let pages = getCurrentPages();//当前页面
let prevPage = pages[pages.length - 2];//上一页面
prevPage.data.loginComeBack = true;  // 改变上页中 loginComBack 的值
wx.navigateBack({}) 返回上一页

// 上一页的 data
data: {
  loginComBack: false
}

14. selectComponent 获取的不是标签的名称，而是 class 的名称

在 .wxml 中, 定义了 class

1
2
3
4
5
6
7
8
9
10
11
 <wxc-dialog 
  class="wxc-dialog" 
  title="灵魂用于歌唱，好物用于分享" 
  content="" 
  confirm-text="分享给好友" 
  image="/images/img_pay_share.png" 
  bind:confirm="onConfirm" 
  bind:cancel="onCancel"
  closeUrl="/images/icon_close.png"
  openStyle="share">
</wxc-dialog>

在 .js 中获取

1
2
3
4
5
showShareDialog: function() {
    let dialogComponent = this.selectComponent('.wxc-dialog')
    console.log(dialogComponent);
    dialogComponent && dialogComponent.show();
}

15.背景渐变配置样式

1
background: linear-gradient(-90deg, #FF3537 0%,  #FE6493 100%);

16. 允许文本复制

1
<text selectable=’true’ >复制文本< text/>

17. 判断空对象

1
Object.keys(this.data.userSpecialInfo).length === 0

18. 发送消息模板需要经 formid 提交给后台

官方链接发送消息
例子

1
2
3
4
5
6
<form class='make-deals' 
      report-submit="true" 
      bindsubmit="formSubmit"
      bindreset="formReset">
   <button form-type="submit" class='btn-make-deals'>确认下单</button>
</form>
1
2
3
4
5
6
7
8
formSubmit: function (e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.formId);
    this.makeDeals(e.detail.formId);
 },
 
formReset: function () {
    console.log('form发生了reset事件')
}

19. 跳转用 navigator 组件

设置跳转的方所 type
跳转的的路径 url
如果是带参数跳转 例如 /pages/search?cateCode=111&title=”标题”
中/pages/search 是要跳转的页面，cateCode 是参数key，111 是参数的 value
官方例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<view class="btn-area">
  <navigator 
    url="/page/navigate/navigate?title=navigate" 
    hover-class="navigator-hover">跳转到新页面
  </navigator>
  <navigator 
    url="../../redirect/redirect/redirect?title=redirect" 
    open-type="redirect" 
    hover-class="other-navigator-hover">在当前页打开
  </navigator>
  <navigator 
    url="/page/index/index" 
    open-type="switchTab" 
    hover-class="other-navigator-hover">切换 Tab
  </navigator>
  <navigator 
    target="miniProgram" 
    open-type="navigate" 
    app-id="" 
    path="" 
    extra-data="" 
    version="release">打开绑定的小程序
</navigator>
</view>

20. 页面自动滚动到底部

1
2
3
<view class='root' id='root-id'>
   <scroll-view class='scroll-view' scroll-top="{{scrollTop}}">
</view>
1
2
3
4
5
6
7
wx.createSelectorQuery().select('#root-id').boundingClientRect(function (rect) {
  // 使页面滚动到底部  
  console.info("pageScrollToBottom", rect );
  wx.pageScrollTo({
    scrollTop: rect.bottom
  })
}).exec();

root-id 是 page 页面的 id
scroll-top 可以滚动到指定位置，这里是底部

21. 小程序常用的开源 UI 控件

. WeUI 同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web https://github.com/Tencent/weui-wxss
.MinUI 第三方基于规范的小程序组件库，简洁、易用、工具化,并支持wepy和组件化方案等
https://meili.github.io/min/index.html
.ZanUI 第三方的一个颜值高、好用、易扩展的微信小程序 UI 库
https://github.com/youzan/zanui-weapp

22. 待续···

如果以后还有一些点，会更新

yxhuang wechat
欢迎您扫一扫上面的微信公众号，订阅我的博客