微信小程序🎯封装请求功能函数
项目搭建
引入IconFont
- 在官网https://www.iconfont.cn/选择图标加入购物车,然后新建项目,生成在线代码链接
- 复制链接里的代码,在微信项目中新建
static/iconfont/iconfong.wxss
,复制进去保存 - 然后在
app.wxss
中全局引入
1 | @import "/static/iconfont/iconfont.wxss"; |
1 | <view class="navContainer"> |
1 | .navContainer{ |
scroll-view
- 可滚动视图区域。使用竖向滚动时,需要给
scroll-view
一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)
1 | <scroll-view class="recommendScroll" enable-flex scroll-x> |
1 | /*推荐内容区*/ |
网络请求
域名备案
- 微信小程序请求的服务地址市需要备案的,登陆官网:https://mp.weixin.qq.com/wxamp/
- 在【开发管理】->【开发设置】里,有一个【服务器域名】的设置
- 扫码验证后进行合法域名注册,协议必须是
https
,最多配置20个域名
- 当然,如果开发中没有
https
协议的接口,可以在开发工具中的右上角的【详情】->【本地设置】里,勾选不进行http
校验
1 | // 生命周期里拿取数据 |
请求封装
- 先在
utils
下新建config.js
进行服务器的配置,真机调试需要对本地地址进行内网穿透
1 | // 配置服务器相关的信息 |
- 在
utils
下新建request.js
进行请求封装,因为请求是在另一个模块中,调用拿不到返回的数据,所以需要引入Promise
异步返回数据给调用的模块
1 | import config from './config' |
- 如果无法使用
async
,需要开发工具中的右上角的【详情】->【本地设置】里的【增强编译】
1 | onLoad: async function(options){ |
列表渲染
- 在
data
中绑定数据,使用setDate
修改数据
1 | import request from '../../utils/request' |
- 在调试器中【AppData】可以查看数据,然后渲染轮播图数据
1 | <view class="indexContainer"> |
定义组件
- 在根目录创建
components/navheader
文件夹,然后右击【新建Component】
1 | <view class="header"> |
1 | { |
- 组件和页面不同,组件具有属性,属性用于接收外部传来的值,等同于
Vue
中的props
,这样我们就可以自定义组件内容
1 | // components/NavHeader/nav-header.js |
- 然后在父页面引入,对于页面中多次使用的组件都可以抽离出来组成组件
1 | { |
1 | <view class="recommendContainer"> |
时间戳转换
WXS
(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构;WXS 的运行环境和其他 JavaScript 代码是隔离的,WXS 中不能调用其他 JavaScript 文件中定义的函数,也不能调用小程序提供的API- 在
utils
文件夹下创建pipe.wxs
1 | function format(ts) { |
- 在需要使用的
wxml
文件中头部引入
1 | <!--引入管道--> |
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 小李博客!
评论