小程序开发流程

[douzi8]

环境准备

1. 官方文档
2. 下载微信开发者工具
3. 小程序appId

   // 开发
   appId: wxf8a12db8973af70d
   // 生产
   appId2: wxe0ed7ed9772c46de
   // 集合版本
   appId3: wxef48dc1e3c12f641

线上代码

搜索乐车邦熟悉线上现有流程

本地运行

1. git clone http://git.lcbint.cn/weixin/webapp (master) 代码
2. 进入webapp目录clone http://git.lcbint.cn/weixin/lizard (master) 代码
3. 在微信开发者里面导入webapp目录即可运行线上效果

新框架demo

1. git clone http://git.lcbint.cn/weixin/demo (master) 代码
2. 进入demo目录clone http://git.lcbint.cn/weixin/lizard (2.0.0) 代码

[douzi8]

新框架开发注意事项

1. onCreate里面不能判断用户是否登录,其他页面回调可以
2. 组件封装的差异
3. filter必须写在widget/service/filter.wxs里面， 具体可以参考wxs语法
4. 每个业务模板必须在底部追加

   <!-- 过滤器 -->
   <wxs src="../../widget/filter.wxs" module="filter" />
   <!-- 系统模板 -->
   <include src="../../lizard/template/system.wxml"/>

5. PageView类不允许自定义方法，只能覆盖已存在的方法，如ajaxGen, onShow

   class View extends PageView {
   // 错误，不能自定义方法
   customCallback () {}
   }

6. PageView如何继承vueConfig

   
   let vueConfig = {
   // ...
   }
   class View extends PageView {
   }

View.vueConfig = vueConfig

class View2 extends View { vueLink (list,city) { // 调用父类的vueLink let result = super.vueLink(list, city)
result.data.k = 'v' return result } }

// 深度扩展父类的vueConfig View2.vueConfigExtend({ methods: { k2: function () {} } })

7. 获取元素位置
如果需要把页面定位到某个位置，继续调用``PageView#setPagePos``方法
```JavaScript
// $选择单个dom
// $$选择多个dom
// 操作返回的是promise对象
const { $, $$ } = require('../../lizard/dom')

    generator(function* () {
        let [
          offset,
          offsets 
        ]= yield [
          $('.js-txt').offset(),
          $$('.js-txt').offset()
        ]

        console.log(offset)
        console.log(offsets)
       // 页面锚点功能
       this.pageView.setPagePos(offset.top)
      }).catch(util.promiseCatch)

8. 每个小程序必须有一个pages/login/目录，具体代码可以直接复制demo项目

9. 小icon全部使用单个的svg放本地

10. 如何封装UI组件，参考demo代码

[douzi8]

具体api差异

Lizard.alert

返回promise对象

let confirm = yield Lizard.alert('确认删除订单？')

if (confirm) {
   // 点击确认
} else {
  // 点击取消
}
// 注意，这里的btns是一个包含字符串的数组
let confirm2 = yield Lizard.alert({ title: '', msg: '',  btns: ['确定']})

Lizard.startPosition

新增的定位api, 如果用户已经订过位，可以直接读取Lizard.state.address

// 缓存位置
Lizard.state.address (如果为null没有定位)

// 实时定位
    Lizard
        .startPosition()
        .then(() => {
          console.log(Lizard.state.address)
        })
        .catch(() => {
          console.log('定位失败')
        })

LizardBridge.payment

SOA在创建订单成功后，会返回所有支付参数，前端只需要调用

      LizardBridge.payment(dataJson).then(res => {
        if (res) {
          console.log('支付成功')
        } else {
          console.log('取消支付')
        }
      })

Vue.methods

vue里面的methods参数不同,这里只传入一个参数{ data: event.currentTarget.dataset, detail: event.detail, event:event }

<view bindtap="remove" data-index="1"></view>
<input placeholder="请输入验证码" bindinput="setMobile" />

methods: {
  remove ({
    data: {
       index
     }
   }) {
   },
  setMobile ({
    detail: {
      value
    }
  }) {
  }
}

通用filter

<!-- 日期格式处理 -->
<view>{{filter.dateFormat(date, 'yyyy年mm月dd日 HH:MM:ss 周C')}}</view>
<!-- 距离显示 -->
<view>{{filter.distance(500)}}</view>
<!-- 价格转整 -->
<view>{{filter.priceInt(200)}}</view>
<!-- 价格展示到分数 -->
<view>{{filter.priceCent(120)}}</view>

<!-- 过滤器 -->
<wxs src="../../widget/filter.wxs" module="filter" />

pushOnShowTask

推送的任务，只有在页面再次显示的时候，自动调用，优先级高于onCache

watch: {
    // 监听用户登录了
    isLogin (newValue) {
      if (newValue) {
        let pv = this.pageView
        // 只有当前页面显示的时候，在执行
        pv.pushOnShowTask(pv.reload, pv)
        // 或者
        pv.pushOnShowTask(() => {
           pv.reload()
        })
      }
    }
  }

v-model

let vueConfig = {
   // input和data双向绑定
   // 模板里面的input必须同时使用 bindinput="set_key"这种语法
   vModel: ['mobile', 'code'],
   methods: {
   }
}

<!-- vueConfig methods里面无需在定义set_mobile方法-->
<input  type="number"  bindinput="set_mobile" value="{{mobile}}" />
<input  type="number"  bindinput="set_code" />

[deng666]

1. svg图不能修改颜色，只能提起定义颜色；
2. input标签placeholder设置自定义颜色：直接在input里面添加 placeholder-style="color:#ccc; font-size: 26rpx"

[qubitsky]

列表渲染中，key的添加规则

wx:key属性的值只能是以下两种：

1. 循环项是个对象的，找值唯一的属性，取其名称
2. 循环项不是对象的，取 *this

举例：

// 列表数据

// 1. 项目是对象的
const fruits = [{
  id: '001',
  name: 'apple',
  color: 'red'
}, {
  id: '002',
  name: 'orange',
  color: 'yellow'
}, {
  id: '003',
  name: 'banana',
  color: 'yellow'
}]

// 2. 项目非对象 
const numbers = [1, 2, 3, 4]

// 3. 多重循环情况
students = [
  {
    id: 1,
    class: '1班',
    members: [
      { id: 11, name: 'wang'},
      { id: 12, name: 'zhao'},
      { id: 13, name: 'qian'},
    ]
  }, {
    id: 2,
    class: '2班',
    members: [
      { id: 21, name: 'zhou'},
      { id: 22, name: 'wu'},
      { id: 23, name: 'zheng'},
    ]
  }, {
    id: 3,
    class: '3班',
    members: [
      { id: 31, name: 'li'},
      { id: 32, name: 'deng'},
      { id: 33, name: 'yang'},
    ]
  },
]

<!-- wxml模板 -->

<view wx:for={{fruits}} wx:key="id">{{item.name}}</view>
<!-- key 也可以取属性名 name，即 wx:key="name"，只要唯一就行 -->

<!-- numbers的项目不是对象 -->
<view wx:for={{numbers}} wx:key="*this">{{item}}</view>

<!-- 内外层循环key值可以相同，对应不同循环项的属性名，不冲突 -->
<view wx:for={{students}} wx:key="id" wx:for-item="class">
    {{ class.class }}
    <!-- 上面的id，是对应class的id；下面的id，是对应item的id -->
    <view wx:for={{item.members}} wx:key="id">{{item.name}}</view>
</view>

[deng666]

image图片的两种场景：

1. 店铺banner图；
2. 首页晒单场景图 解析： 1.店铺banner图：使用mode="widthFix" ，宽度不变，高度自动变化，保持原图宽高比不变，然后再使用图片垂直居中展示，如图片高度>图片模板高度，则截取图片的下半部分 2.晒单场景图： mode="scaleToFill"，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 【注：点击预览大图使用的是小程序的API（wx.previewImag(OBJECT)）】