![](https://upload-images.jianshu.io/upload_images/270363-f73b9962313a847e.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/480)
1.微信基本组件的高级解读
- 数据绑定,记住使用
{{}}
- 列表,使用
wx:for
,同时设置好wx:key
。不然,编辑器总是有红色警告。 - 条件,使用
wx:if
,wx:else
orwx: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.目录结构规划
![](https://i-blog.csdnimg.cn/blog_migrate/c67b1f27d449ef03f36c0a3f38104d3d.webp?x-image-process=image/format,png)
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'
})
}