开发小程序时，，，，，，使用bmob后端云提供数据存储服务，，，，，，文档详细精练，，，，，，主要是缩短了开发周期，，，，，，不过关于重大的项目，，，，，，照旧推荐使用自己服务器提供数据服务。。。。。

源码地点： github.com/alex1504/wx…

下面分点分享下小程序的开发历程中的要害点及感受，，，，，，说明：

1. 小程序标签统称组件，，，，，，Html标签统称元素。。。。。
2. 部分内容会与vuejs及jQuery作比照

使用iconfont字体图标

新建项目并添加图标

 

在app.wxss中以unicode方式引入

@font-face {
  font-family: 'iconfont';  /* project id 431644 */
  src: url(/miniprogramdev/&);
  src: url(/miniprogramdev/&) format('embedded-opentype'),
  url(/miniprogramdev/&) format('woff'),
  url(/miniprogramdev/&) format('truetype'),
  url(/miniprogramdev/&) format('svg');
}
复制代码

界说通用icon样式，，，，，，界说伪元素

.icon{
  display: inline-block;
  font-family: 'iconfont';
}
.icon-home::before{
  content: "\e600";
}
复制代码

使用

<view class="icon icon-home"</view>
复制代码

小程序事务绑定及处理器

小程序并没有类似vuejs的v-model举行双向绑定，，，，，，使用bindinput类似jQuery监听input事务在事务处理器中更新数据，，，，，，通过event工具e.data.value即可获得input的值。。。。。

// bindconfirm监听键盘回车事务，，，，，，focus属性聚焦渲染组件时会自转动脱手机软键盘
<input type='text' placeholder='歌曲名 / 歌手' bindinput='bindSearchInput' bindconfirm='onSearch' focus></input>
复制代码

bindSearchInput(e) {
  this.setData({
    searchTxt: e.detail.value
  })
}
复制代码

小程序中的事务处理器并不可像vue一样传入参数，，，，，，由于事务处理器只有一个默认的参数event工具，，，，，，在for循环的组件中若是要想获取元素绑定的id，，，，，，可以通过和jQuery相同的方式绑定data属性。。。。。

<!-- 轮播图 -->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{banner_list}}" wx:key="{{index}}">
    <swiper-item bindtap="navigateToDetail"  data-id="{{item.href}}">
      <image src="{{item.image}}" class="slide-image" mode="widthFix"></image>
    </swiper-item>
  </block>
</swiper>
复制代码

获取id：

//事务处理函数
navigateToDetail: function (e) {
  const id = e.currentTarget.dataset.id;
}
复制代码

阻止事务冒泡

bindtap、bindlongtap、bindtouchstart、bindtouchmove、bindtouchend、bindtouchcancle
复制代码

对应阻止冒泡事务将bind用catch替换

setData

小程序的视图更新需要挪用setData修改绑定命据，，，，，，直接对数据举行修改是不会触发视图层更新的。。。。。setData接受一个工具，，，，，，为需要添加或修改的属性。。。。。属性名有点特殊，，，，，，[]中的值会被识别为变量，，，，，，因此若是要对工具数组中的某个属性举行修改，，，，，，只能预先拼接好属性名。。。。。 过失做法：

// 视图不更新
this.data.searchSongs[index].love_flag': 2
// SyntaxError: unknown: Unexpected token
this.setData({
  'searchSongs[' + index + '].love_flag': 2
})
复制代码

准确做法：

setSongFlag(e) {
// 注重setData属性名[]中的非整数值会被识别为变量
let key = 'searchSongs[' + index + '].love_flag'
this.setData({
  [key]: 2
})
复制代码

关于image组件

小程序wxss的background-image及image组件都不支持外地url 在H5的开发中，，，，，，通常我们会将页面一些不需要凭证容器巨细来选择显示方式的图片使用img标签，，，，，，需要一些特殊显示方式的使用background。。。。。但小程序只需要image组件便可。。。。。它提供的mode属性和配景界说图片及img元素控制图片显示方式比照

mode属性	background-size	html img元素
scaleToFill	100%,100%(默认)	width:100%;height:100%
aspectFit	contain	js实现
aspectFill	cover	js实现
widthFix	100%, auto	width: 100%;

其他的top、bottom、right、left等不缩放图片调解位置的属性与background-position作用相同，，，，，，img元素则只能通过定位控制。。。。。

小程序API异步方案

若是没有强迫症，，，，，，小程序API使用默认回调的方式即可；；另外由于小程序只支持es6，，，，，，不支持async及await，，，，，，也可以将API封装成promise的方式。。。。。

function promisify(fn) {
  return function (obj = {}) {
    return new Promise((resolve, reject) => {
      obj.success = function (res) {
        resolve(res)
      }

      obj.fail = function (res) {
        reject(res)
      }

      fn(obj)//执行函数，，，，，，obj为传入函数的参数
    })
  }
}
module.exports = {
    promisify: promisify
}
复制代码

使用：

const promisify = require('./promisify.js')
const request = promisify(wx.request);

request({
    url: 'some URL'
    method: 'GET',
}).then(res => {   
    console.log(res)                 
}
复制代码

小程序问题

• 调试器没有css快捷提醒功效和颜色面板，，，，，，影响结构及颜色调解效率（随性派）
• 无法引入第三方js库
• 内置组件枯燥，，，，，，没有思量字体数目较量多时的自顺应情形
• 不支持跳转外部链接
• 配景图片或者image组件不可用外地图片

小程序工具提供多类型商城/门店小程序制作，，，，，，可视化编辑 1秒天生5步上线。。。。。通过拖拽、拼接？？榻峁剐〕绦蛏坛且趁，，，，，，所看即所得，，，，，，只需要美工就能做出细腻商城。。。。。更多小程序市肆请审查：小程序市肆

KESION pp电子软件

KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商，，，，，，恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。。。

KESION 一直通过手艺立异，，，，，，提供产品和服务，，，，，，助力企业向数字化转型，，，，，，通过科技驱动商业刷新，，，，，，让商业变得更智慧！

▼点击进入pp电子官网相识更多