微信小程序
CV键都碎了
真·前端小垃圾,努力混饭的智障
展开
-
21.优化获取地址代码
cnm,听不懂,不会做。原创 2021-07-06 11:11:12 · 51 阅读 · 0 评论 -
20.底部工具栏加入购物车和立即购买功能
cnm,不会做原创 2021-07-05 15:53:45 · 320 阅读 · 0 评论 -
19.底部工具栏
底部工具栏分为五块,主要有css样式进行布局html<view class="btm_tool"> <view class="tool_item"> <view class="iconfont icon-kefu"></view> <view>客服</view> <button open-type="contact"></button> </view> <原创 2021-07-05 11:28:20 · 115 阅读 · 0 评论 -
18.图片放大事件
添加轮播图点击无放大事件<view class="detail_swiper"> <swiper autoplay circular indicator-dots > <swiper-item wx:for="{{goodsObj.pics}}" wx:key="pics_id" bindtap="handlePrevewImage" data-url="{{item.pics_mid}}" >原创 2021-07-02 17:00:50 · 114 阅读 · 0 评论 -
17.动态渲染优化
现在goodsObj中有22条从后天传来的数据,而页面需要用到的只有四条。this.setData({ goodsObj:{ goods_name:goodsObj.goods_name, goods_price:goodsObj.goods_price, //iphone部分手机不识别 webp图片格式 //最好找后台,让他进行修改 //临时自己改 确保后台存在1.webp => 1.jpg goods_intro原创 2021-07-02 15:29:44 · 53 阅读 · 0 评论 -
16.商品详情页
页面跳转 <navigator class="goods_item" wx:for="{{goodsList}}" wx:key="goods_id" url="/pages/goods_detail/index?goods_id={{item.goods_id}}" > <!-- 左侧图片容器 --> <view class="goods_img_wrap"> <原创 2021-07-02 14:49:20 · 474 阅读 · 0 评论 -
15.添加加载中图标
加载中图标显示,查阅官方文档可知每次加载都要调用次方法,代码冗余过大。所以可直接加载在request中。// 同时发送异步代码的次数let ajaxTimes = 0;export const request=(params)=>{ ajaxTimes++; // 显示加载中 效果 wx.showLoading({ title: '加载中', mask:true, success:() => { },原创 2021-07-01 11:27:42 · 308 阅读 · 0 评论 -
14.添加下拉刷新
查阅小程序官网文档,可查到下拉刷新样式index.json"enablePullDownRefresh": true,"backgroundTextStyle": "dark"添加下拉刷新事件async getGoodList(){ //关闭下拉刷新等待,没有调用下拉刷新直接关闭也是可以的 wx.stopPullDownRefresh(); },onPullDownRefresh(){ //1. 重置数组 this.setData({ good原创 2021-07-01 10:24:40 · 50 阅读 · 0 评论 -
13加载下一页数据
用户上滑页面 滚动条触底,开始加载下一页数据找到滚动条触底事件 官方文档寻找。判断还有没有下一页数据获取到总页数,但现在只有总条数总页数 = Math.ceil(总条数total / 页容量 pagesize)总页数 = Math.ceil( 23 / 10 ) = 3没有下一页数据,弹出提示有下一页,加载下一页。当前的页码 ++重新发送请求数据请求回来 要对data中的数组进行拼接,而不是全部替换。goods_list/index.jsPage({ /*.原创 2021-06-30 17:11:43 · 187 阅读 · 0 评论 -
12 动态渲染显示商品
接口需要参数:good_list/index.html<block wx:if="{{tabs[0].isActive}}"> <view class="first_tabs"> <navigator class="goods_item" wx:for="{{goodsList}}" wx:key="goods_id" > <!-- 左侧图片容器 --> <vi原创 2021-06-30 15:01:34 · 62 阅读 · 0 评论 -
11 tabs组件
点击商品后的页面详情,套用父子组件.新增编辑模式,增加传递参数。每次编译都直接进入商品详情页。新增搜索栏,和之前一样,直接调用组件。新增tabs组件。在components新建组件。tabs.html<view class="tabs"> <view class="tabs_title"> <view class="title_item {{item.isActive?'active':''}}" wx:for="{{tabs}}" w原创 2021-06-30 09:51:17 · 594 阅读 · 0 评论 -
10简化返回数据和使用es7的async语法
es7的 async async 号称是解决回调的最终⽅案在⼩程序的开发⼯具中,勾选es6转es5语法下载facebook的regenerator库中的regenerator/packages/regenerator-runtime/runtime.js(由于github经常上不去,我把代码放在最后)在⼩程序⽬录下新建⽂件夹 lib/runtime/runtime.js lib/runtime/runtime.js ,将代码拷⻉进去在每⼀个需要使⽤async语法的⻚⾯js⽂件中,都引⼊(不能全原创 2021-06-28 16:42:36 · 154 阅读 · 0 评论 -
9 提取公共接口路径
每次调用接口获取数都有一大部分相同,可以提取出来,调用时合成即可。 url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'request.jsexport const request=(params)=>{ // url:"https://api-hmugo-web.itheima.net/api/public/v1/categories" const baseUrl = "https://a原创 2021-06-28 15:05:31 · 293 阅读 · 0 评论 -
分类菜单优化
左侧菜单优化。如果右侧菜单拉到最底下,每次点击左侧菜单都在最下面。可在scroll-view标签中加入属性scroll-top="{{scrollTop}}",每次赋值为点击0<scroll-view scroll-y scroll-top="{{scrollTop}}" class="right_content"> data: { //右侧内容滚动条距离顶部的距离 scrollTop:0 }, //左侧菜单的点击事件 handleItemTap(e原创 2021-06-28 14:24:52 · 76 阅读 · 0 评论 -
缓存数据的实现
因为接口数据太大,需要添加缓存数据。思路:先判断本地储存中有没有旧数据没有旧数据,直接发送新的请求有旧的数据,同时旧数据也没有过期,就是用本地储存的旧数据即可。index.jsonLoad: function (options) { /* 0. web中的本地存储和小程序的本地存储的区别 1. 写代码的方式不一样了 web: localStorage.setItem("key","value") localStorage.getItem(原创 2021-06-28 11:24:16 · 92 阅读 · 0 评论 -
分类页面的实现
首先是页面与接口数据的关系数据与页面2. 功能实现自定义编译模式,其实就是指定编译的初始界面。原创 2021-06-28 10:00:08 · 636 阅读 · 0 评论 -
首页楼层的实现
楼层的实现比较繁琐,多次使用less语法生成wcss. 由于使用原生框架,此处较为繁琐。<!-- 楼层开始 --><view class="index_floor"> <view class="floor_group" wx:for="{{FloorList}}" wx:for-item="item1" wx:for-index="index1" wx:key="floor_title" > <!-- 标题 -->原创 2021-06-18 14:36:47 · 154 阅读 · 0 评论 -
Promise代码优化
封装Promise方法export const request=(params)=>{ return new Promise((resolve,reject)=>{ wx.request({ ...params, success:(result)=>{ resolve(result); }, fail:(err)=>{原创 2021-06-11 15:14:50 · 144 阅读 · 0 评论 -
轮播图实现
步骤定义轮播图数组测试接口将接口获取到的数据赋值给轮播图数组。渲染到界面上。进行图片大小调试。index.wxml<view class="pyg_index"><!-- 轮播图 开始 --><view class="index_swiper"> <swiper autoplay indicator-dots circular> <!-- 1. swiper标签存在默认的宽度和高度 100%原创 2021-06-11 14:21:51 · 182 阅读 · 0 评论 -
首页搜索框
步骤首页搜索框为自定义组件,所以按添加自定义组件的步骤添加新的组件然后添加样式searchInput.wxml<view class="search_input"> <!-- //超链接标签 --> <navigator url="/pages/search/index" open-type="navigate"> 搜索 </navigator></view>navigator为超链接标签url属性为跳原创 2021-06-10 18:28:17 · 175 阅读 · 0 评论 -
初始化商城项目
新建项目。填写自己的appid。删除日志等一些不用的代码。新建页面。阿里图标网站选取自己用到的图标 阿里巴巴字体iconfont.此项目使用添加到项目,fontclass生成代码,css存入外网。在app.json中配置tabbar...原创 2021-06-10 16:01:43 · 47 阅读 · 0 评论 -
自定义组件slot
solt就相当于一个占位符,或插槽自定义组件wxml: <view class="tabs_content"> <slot></slot> </view>页面wxml:<Tabs tabs="{{tabs}}" binditemChange="handleItemChange" > <block wx:if="{{tabs[0].isActive}}">0</block> <bloc原创 2021-06-10 14:15:25 · 131 阅读 · 0 评论 -
父子组件传值2
上一个界面虽然实现功能,但还有不足。const {index} = e.currentTarget.dataset; //3 获取data中的数组 let {tabs} = this.data; // console.log(this.data); //4 循环数组 // [].foreach遍历数组 遍历数组的时候修改了v,也会导致原数组被修改 v是每一个循环项 i索引 tabs.forEach((v,i)=>i===ind原创 2021-06-10 10:07:05 · 96 阅读 · 0 评论 -
父子组件传值
现在组件的定义数据是写死的,只有调用组件时使用固定数据。在开发中,自定义组件需要应用在多个地方,并且是不同的值,所以需要父子组件传值。父子组件传值的基本实现。步骤应用自定义组件见面的js中,添加自定义组件应用的数据Page({ /** * 页面的初始数据 */ data: { tabs:[ { id:0, name:"首页", isActive:true }, { i原创 2021-06-09 17:33:13 · 47 阅读 · 0 评论 -
自定义组件顶部导航栏
此处自定义导航栏,选中的一栏颜色变更。步骤新建数组,存放各个标签。isActive属性为是否被选中。新建view标签,循环显示数组中的数据。添加css属性,实现被选择后的样式将css属性应用到被选择的标签上设置绑定事件bindtap=“handleItemTap”绑定index索引data-index="{{index}}",H5标签新增的自定义属性 格式为data-* 可为目标元素绑定一个自定义名称的属性<view class="tabs"> <view原创 2021-06-09 16:16:57 · 197 阅读 · 0 评论 -
微信小程序自定义组件基本实现
自定义组件步骤在根目录新建文件夹components,在此文件夹中再次新建文件夹命名为组件名称,然后鼠标右击选择新建component。tabs.js{ "component": true, // 自定义组件声明 "usingComponents": {} // 可选项,用于引用别的组件}在需要使用自定义组件的页面进行声明,demo11.json{ "usingComponents": { "Tabs":"../../component/Tabs/Tabs"原创 2021-06-09 15:14:12 · 57 阅读 · 0 评论 -
单选框复选框
单选框按钮:<radio-group bindchange="handleChange"> <radio color="red" value="male">男</radio> <radio color="green" value="female">女</radio></radio-group><view>您选中得是:{{gender}}</view>Page({ data: {原创 2021-06-08 18:08:38 · 63 阅读 · 0 评论 -
button标签
button标签有很多属性和样式,具体参照官方文档<button>默认按钮</button><button size="mini">mini默认按钮</button><button type="primary">primary默认按钮</button><button type="warn" loading>warn默认按钮</button>列式编程contact 打开客服会话,如果⽤⼾在会话.原创 2021-06-08 17:13:34 · 538 阅读 · 0 评论 -
富文本标签
纯文本和富文本得区别纯文本就是用文本编辑器编写,输入什麼就是什麼的文档.富文本是通过纯文本进行更高层次渲染和计算,然後再呈现给你看的文档.举个简单的例子:html等网页文件中用我是红色的字包裹起来的文字会显示为红色.在纯文本编辑器中你看到的是:< font color=‘red’>我是红色的字< /font>wxml <rich-text nodes="{{html}}"></rich-text>jsPage({ data: {原创 2021-06-08 15:33:21 · 2119 阅读 · 0 评论 -
轮播图swiper
轮播图组件为swiper<swiper autoplay interval="2000" circular> <swiper-item> <image mode="widthFix" src="//www.yonghui.com.cn/UpLoad/News/20190613115739.jpg" /> </swiper-item> <swiper-item> <image mode="widthFix" src="//ww原创 2021-06-08 14:06:04 · 96 阅读 · 0 评论 -
rpx样式
rpx可以根据屏幕宽度自适应,规定屏幕宽度为750rpx。如在iphone6上面,屏幕宽度375px,共有750个像素,则750rpx = 375px = 750物理像素设计稿750px = 750 rpx1px = 1rpx把屏幕宽度改成375px375 px = 750 rpx1 px = 2rpx1rpx = 0.5px存在一个设计稿,宽度414 或者 未知,用page表示1 设计稿 page 存在一个元素 宽度 100px2 拿以上的需求 去实现 不同宽度的页面适配原创 2021-06-07 15:21:49 · 106 阅读 · 0 评论 -
微信小程序事件绑定
demo04.wxml<input type="number" bindinput="handleInput" /><button bindtap="handleClick" data-operation="{{1}}">+</button><button bindtap="handleClick" data-operation="{{-1}}">-</button><view>{{num}}</view>dem原创 2021-06-04 12:15:48 · 54 阅读 · 0 评论 -
微信小程序渲染
1. 列表渲染wx:for项变量名默认 item , wx:for-item可以指定当前数组的变量名下标变量名默认index, wx:for-index可以指定数组当前下标的变量名wx:key 用来提高数组渲染的性能,绑定的值有如下选择string 类型,表示循环项中唯一属性list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]wx:key="id"保留字*this,*this代表item本身,代表的必须是唯一的字符串和数组。list:[1,2,3,原创 2021-06-04 10:27:34 · 127 阅读 · 0 评论 -
微信小程序模板语法
1. 数据绑定普通写法:<view> {{message}} </view>Page({ data:{ message:'Hello MINA!' }})组件属性:<view id="item={{id}}"> </view>Page({ data:{ id:0 }})bool属性:不能直接写check="false"属性,其计算结果是一个字符串<checkbox checked="{{fa原创 2021-06-04 09:49:05 · 86 阅读 · 0 评论 -
微信小程序配置文件
字段的含义:1. pages ,当前小程序的所有路径,让微信客户端知道你的小程序定义了那个目录。2. window,定义所有页面的顶部颜色,文字颜色等。3. 完整参考: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.htmlpage.json, 页面文件夹下的的json文件开发者可以独立定义每一页的一些属性,如顶部颜色,允许下拉刷新。...原创 2021-06-04 09:30:11 · 112 阅读 · 0 评论 -
微信小程序入门
环境准备需要注册微信开放平台账号。下载小程序开发工具。后期按习惯使用vscode进行编码,小程序开发工具作为调试工具。获取appid此后小程序的上线发布都需要使用appid。注意保密此appid。小程序文件结构和传统web对比小程序配置文件更多详细信息参见官方文档...原创 2021-06-02 17:07:29 · 41 阅读 · 1 评论