小程序高级实战开发

 

1.微信基本组件的高级解读

• 数据绑定，记住使用{{}}
• 列表，使用wx:for，同时设置好wx:key。不然，编辑器总是有红色警告。
• 条件，使用wx:if,wx:else or wx:elif
• 模板不建议大量使用用，因为无法使用自己的样式
• 事件，强记下哪些冒泡事件和非冒泡事件。在使用组件，尤其是组件套组件时，特别注意此类事件。
• 引入，import = 引入模板文件，include = 复制文件源码， @import 引入样式文件
• wxss，理解并使用rpx来替代px

2.自定义组件的使用

a 自定义组件的使用场景

可以抽象，并重复使用的就可以做成组件。
比如：分享组件、Tab组件、Pannel组件等等。

b 示例

***组件使用，支持服务器下发分享按钮文本和分享内容***
<comp-share text="{{shareconfig.ShareButtonText}}"></comp-share> 

***share.js***
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    text: {
      type: String, value: '分享给好友' } }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { onTapButton (e) { this.triggerEvent('tapbutton', {e}) } } }) 

***share.wxml***
<view class="flex items-center"> <button open-type="share" class="button">{{text}}</button> </view> 

***share.wxss***
@import '../../static/wxss/common.wxss'; .button { background: linear-gradient(#AEAEF9, #9ED1FA); box-shadow: 1rpx 1rpx 1rpx 1rpx #C28230; position: fixed; align-content: center; bottom: 30rpx; width: 30%; height: 60rpx; border-radius: 30rpx; font-size: 30rpx; margin: 0 35%; color: white; line-height: 60rpx; } 

效果图

 

image.png

3.目录结构规划

 

image.png

4.常用组件的封装

b 请求api

***使用***
// 获取金币收入列表
var Request = require('request.js') function getIncome(page = 1, success) { var url = Common.API + '/User/MyIncome/' + page Request.Get(url, success) } 

***request.js***
function Get(url, success, err = errhandle, header = HEADER) { ShowLoading() return wx.request({ url: url, success: function (res) { // console.log('geturl', res) wx.hideLoading() if (res.statusCode != 200) { err(res.data) return } success(res.data.data) }, header: header }) } function Post(url, data, success, err = errhandle, header = HEADER) { wx.hideLoading() return wx.request({ url: url, data: data, method: 'POST', success: function (res) { wx.hideLoading() if (res.statusCode != 200) { err(res.data) return } success(res.data.data) }, header: header }) } module.exports = { Get: Get, Post: Post } 

c 分享组件

见本文

5.生命周期分析

• onLoad： 初始化数据，包括：从服务器获取页面数据
• onReachBottom： 可用于，列表加载下一页。
• onShareAppMessage： 设置页面分享数据。不设置该方法，页面不支持分享

6.如何发送模板消息

a 小程序需要做什么

在小程序段必须使用form，获取到form_id,并和其他数据一起传给服务器。

b 后端需要如何操作

在小程序后台申请模板消息，发送消息是带上form_id.

*** php代码示例，使用lavavel框架，和easywechat组件 ***
public static function SendTpl($uid, $coin, $formId, $page = 'pages/index/index') { $find = User::find($uid); if ($find) { $data = [ 'touser' => $find->openid, 'template_id' => 'Bg7IEAsOqXhFsjkcu3Wdz7Im6HTbBYIdgq_T9EnfcSY', 'page' => $page, 'form_id' => $formId, 'data' => [ 'keyword1' => '您有一笔金币入账', 'keyword2' => $coin . '金币', 'keyword3' => '哇~有这么多金币呢~~赶快到商店里看看，可以兑换好东西哦~' ] ]; $miniprogram = EasyWeChat::miniProgram(); $miniprogram->template_message->send($data); } } 

7.巧计

a 片段代码的使用技巧

b 与后端的安全认证

8.遇到的一些坑

a 定义在tabbar的页面，不能使用wx.navigateTo 应该使用wx.switchTab

b 在小程序外，如何带参数？以及如何获取参数？

pages/index/index?pid=12直接在页面后带参数

• 获取参数：

onLoad: function (options) {
  if (options.pid) { this.apprentice(options.pid) } } 

c 组件内列表场景下，点击按钮，如何带上所选行参数？

** js组件的方法列表**
  methods: {
    onTapButton(e) {
      var detail = e.detail.target.dataset.detail
      detail["formId"] = e.detail.formId ? e.detail.formId : ''
      console.log('tapbutton', e, detail) this.triggerEvent('tapbutton', { detail: detail, event: e }) // , formId: formId } } *** wxml *** <view class="col-3"> <form bindsubmit="onTapButton" report-submit="{{true}}"> <button class="pannel-btn" type="warn" size="mini" data-detail="{{item}}" plain="{{item.lotery > 0 ? false : true}}" formType="submit">{{item.lotery > 0 ? '兑换' : '补货中'}}</button> </form> </view> 

***页面使用***
bindExchange (e) {
    app.aldstat.sendEvent('商城-商品-' + e.detail.detail.title);
    wx.navigateTo({
      url: '../exchange/exchange'
    })
  }

d 自定义组件，组件内的样式如果需要使用公共样式，需要单独引入。

转载于:https://www.cnblogs.com/purewater2014/p/8862203.html