坎坷的微信小程序【笔记】

1.封装wx.request

项目根目录新建config.js文件，写入请求的主域名，export给http.js进行封装

const config = {api_base_url: 'https://easy-mock.com/mock/5d0b8dd9943d8c4e93c180bd/'
}
export {config}

新建utils包，新建http.js，编写request详细信息，包括处理状态码，export给models下的classic.js进行封装

import {config} from '../config.js'
class HTTP {request(params) {if(!params.method)params.method = "GET"wx.request({url: config.api_base_url + params.url,method: params.method,data: params.data,header:{'content-type': 'application/json'},success: (res)=> {let code = res.statusCode.toString()if(code.startsWith('2')){params.success(res)}else{}},fail: (err) => {},})}
}
export {HTTP}

models/classic.js封装HTTP，export给需要的page

import { HTTP } from '../utils/http.js'
class ClassicModel extends HTTP {getLatest(sCallback){this.request({url: 'classic/latest',success: (res) => {sCallback(res)}})}
}
export {ClassicModel}

2.component的编写

以like组件为例

like包下新建images存放该组件需要使用的图片，以及like根目录下新建名为index的component

目录如图所示：

wxml骨架：view-image-text-view，其中view需开启bind:tap（此为点击事件）并命名为onLike，定义class为container便于管理整个组件（图片+数字）的样式，src和text处都使用数据绑定
```
<view bind:tap='onLike' class='container'><image src="{{like?yesSrc:noSrc}}" /><text>{{count}}</text>
</view>
```

wxss样式：和css风格一致。.container{}中使用flex布局，注意display: inline-flex;的使用

.container{display: inline-flex;flex-direction: row;padding: 10rpx;
}.container image{width: 32rpx;height: 28rpx;
}.container text{font-size: 24rpx;line-height: 24rpx;color: #bbbbbb;position: relative;bottom: 10rpx;left: 6rpx;
}

js逻辑：js文件中主要有三个部分：组件的属性列表（properties）、初始化数据（data）和方法列表（methods）。

Component({/*** 组件的属性列表*/properties: {like:{type: Boolean,},count:{type: Number}},/*** 组件的初始数据*/data: {yesSrc: 'images/like.png',noSrc: 'images/like@dis.png'},/*** 组件的方法列表*/methods: {onLike:function(event){var like = this.properties.likevar count = this.properties.countcount = like?count-1:count+1this.setData({count:count,like:!like})}}
})

json配置：设置component为true

{"component": true,"usingComponents": {}
}

3.引用组件

以classic页面引用like组件为例

首先在classic.json中配置使用组件

{"usingComponents": {"like-cmp":"/components/like/index",}
}

classic.wxml中编写组件需要绑定的数据

<like-cmp like="{{classic.like_status}}" count="{{classic.fav_nums}}"/>

classic.js实例化封装了http请求的ClassModel，在onLoad编写。

import {ClassicModel} from '../../models/classic.js'
let classic = new ClassicModel()
Page({/*** 页面的初始数据*/data: {classic: null},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {classic.getLatest((res)=>{console.log(res)this.setData({classic:res})})},

坎坷的微信小程序【笔记】相关推荐

微信小程序笔记（三）Wepy使用记录—Stylus预编译基本使用
Wepy使用记录-Stylus预编译基本使用坏境搭建请前往wepy框架官网淘宝 NPM 镜像 wepy新建wpy初始化模板参考创建空项目使用wepy init empty 项目名称命令来创 ...
微信小程序笔记六模块化 —— module.exports
微信小程序中所有 js 文件作用域皆为独立的,每一个 js 文件即为一个模块.模块与模块之间的引用通过 module.exports 或 exports 对外暴露接口. 注意: exports 是 m ...
【Cxinny】微信小程序笔记
事件绑定 bindtap:类似click bindinput:文本框的输入事件 bindchange:状态改变时触发事件对象的属性列表event target是触发该事件的源头组件,而current ...
微信小程序笔记（一）初次接触小程序开发
微信小程序的初步使用昨个写了个Vue的小练习,今天再来个微信小程序的练习.数据绑定上大致跟vue的用法差不多,可惜了不会CSS,要不写起来能顺溜不少.这么一看还是写Android顺手. 1.创建 ...
微信小程序笔记、小程序打印
小程序介绍目录结构 app.js //程序的入口 App({//小程序的生命周期函数onLaunch: function () {this.globalData.sysinfo = wx.getSy ...
微信小程序笔记--显示五星好评（注意是显示不是点击评价！）
网上看了好多都是点击事件实现五星评价,想做一个只显示五星的微信小程序模板,结果网上都不全,所以还是自己写一个免得忘记,学艺不精,如果你有更好的方法请一定要留下评论或者私信给我,十分感谢! 1.先上一个 ...
【web】微信小程序笔记小结（模板与配置）
来源:黑马程序员前端微信小程序开发教程目录 I. WXML 模板语法 ① 数据绑定 ※※ 基本原则 ※※ 在 data 中定义数据 ※※ 在 WXML 中使用数据 ※※※※ Mustache 语法的 ...
微信小程序笔记(包含node.js简介)
一.小程序基础知识 1. 小程序简介小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 2. CSS样式 https://www.w3school.c ...
Java 微信小程序笔记二、微信支付退款案例
一.前期准备工作: 上篇博客配置的一些参数和文件Jar包都要用到微信支付需要小程序和商户绑定 APP绑定微信商户平台获取商户id(mchID). 证书(商户后台下载). 支付签名密钥(商户后台设置 ...
微信小程序笔记-列表循环的基本要点
新手笔记,大佬如果发现有误,本人积极改正,谢谢大家了QAQ 长话短说,直入正题,小程序的列表循环和可以分成四个主要的组件但我们要先明白一个道理:先寻找到你想要循环的目标,才能循环,找不到,程序怎么循 ...

坎坷的微信小程序【笔记】

1.封装wx.request

2.component的编写

3.引用组件

坎坷的微信小程序【笔记】相关推荐

最新文章

热门文章