《微信小程序》入门小程序-商城小demo的实现_微信小程序商城代码

quicks:res.data.quicks,

pageRow:res.data.pageRow

})

//隐藏加载中的提示框

wx.hideLoading();

}

})

}

这里通过setData设置数据，刚开始有疑问，为什么要通过setData设置，直接通过类似下例的方法不可以吗？

this.data.swipers = res.data.swipers;

这种方式设置数据难道不行吗，这种设置当然是可以的，但是这种设置有一个致命缺陷，就是设置后的数据不会实时的响应式的渲染到页面上，比如；swipers初始时是一个空数组，页面上通过wx:for循环也没有结果，当使用setData()的方式设置值后，那么页面会实时的渲染新结果，如果是通过直接赋值的方式保存结果，那么此时页面是不会对其作出响应的，仍然是渲染的空数组；

页面跳转

---

在小程序中，页面A跳转到页面B，是通过官方提供的跳转方法：wx.navigateTo()，这个方法通常和事件绑定在一起（当然这个不是绝对的，比如需要根据用户是否登录过作为跳转依据，跳转到不同的页面），具体看示例

页面A，对view绑定了一个点击事件，事件类型是bindtap（点击事件），函数是showShopDetail，代表的是当点击这个view之后触发了showShopDetail这个函数

<view

wx:for=“{{item.desc}}”

class=“right-shop”

wx:key=“index”

data-txt=“{{shop.text}}”

wx:for-item=“shop”

bindtap=“showShopDetail”>

{{shop.text}}

这个函数调用了wx.navigateTo进行页面跳转，跳转的同时携带了一个参数title，值是绑定在view上的自定义属性txt的值

showShopDetail(e){

wx.navigateTo({

//url是需要进行跳转的地址

//例子中是跳转到pages目录下shopList目录下的index页面，并携带了一个参数title

url: ‘/pages/shopList/index?title=’+e.currentTarget.dataset.txt,

})

}

新跳转的页面，比如这里是跳转到shopList这个页面，在shoplist这个页面中的onLoad生命周期内可以接收到传递过来的参数，

/**

• 生命周期函数–监听页面加载

*/

onLoad: function (options) {

//options中会携带传递过来的参数title

this.setData({

title:options.title

})

//设置页面标题

wx.setNavigationBarTitle({

title: options.title,

})

}

自定义组件

---

概述

小程序同样也支持将功能模块抽象成自定义组件，具体查看自定义组件，类似于页面，自定义组件类似于页面，由 json、wxml、wxss、js 4个文件组成，其中必须要在json文件中声明这是一个自定义组件

{

“component”: true

}

之后，在wxml中编写模版，wxss中编写样式，如果有事件需要传递，那么可以通过triggerEvent()方法进行传递

this.triggerEvent(“事件名”,obj)

如果是接收父组件的属性，那么需要在子组件的js文件中定义名字

Component({

/**

• 组件的属性列表

*/

properties: {

//定义了一个count属性，值的类型是Number类型，这个值是父组件上传递过来的

count:Number

},

/**

• 组件的初始数据

*/

data: {},

/**

• 组件的方法列表

*/

methods: {}

})

接着，在需要调用组件的json文件中新定义一个字段usingComponents，key是调用组件时的标签名，值是对应的组件地址

{

“usingComponents”: {

“number”:“/components/number/index”

}

}

案例

自定义组件创建

新建一个组件，在根目录下新建了一个componnents文件夹，之后新建了一个number文件夹，右击number文件夹，选择新建Component，输入名字后会字段生成4个标准文件

在index.wxml中输入结构，同时通过catch绑定两个点击事件

-

{{count}}

+

当然，json文件中必须先声明这是一个组件

{

“component”: true,

“usingComponents”: {}

}

之后就是事件传递了，当点击绑定的两个事件时，将事件往父组件传递

Component({

/**

• 组件的属性列表

*/

properties: {

//定义了一个count属性，值的类型是Number类型

count:Number

},

/**

• 组件的初始数据

*/

data: {},

/**

• 组件的方法列表

*/

methods: {

addCount(){

this.triggerEvent(“addCount”)

},

subtractCount(){

this.triggerEvent(“subtractCount”)

}

}

})

父组件调用

首先是在需要调用number组件的页面，进行组件的注册，组件的注册简单的说就是在调用的页面的json文件中的usingComponents字段中添加组件

{

“usingComponents”: {

//"/components/number/index"是组件所在的路径

“number”:“/components/number/index”

}

}

这样就算是注册了，之后就可以直接在wxml中调用了

数量:

//调用组件

<number

//这个值就是会传递到子组件中

count=“{{partData.count}}”

//绑定了一个事件，事件名就是子组件传递过来的addCount，触发后执行js文件中的addCount函数

catchaddCount=“addCount”

//绑定了一个事件，事件名就是子组件传递过来的subtractCount，触发后执行js文件中的subtractCount函数

catchsubtractCount=“subtractCount”>

这样基本就是一套完整的流程，和vue不同的是，vue是不允许直接修改父组件传递过来的属性的，小程序不同，当子组件接收到父组件传递过来的属性，如果对其做修改，修改的是在data中的副本，换句话说，当子组件接收到父组件的属性后，会在data中创建一个副本，如果对属性修改，那么修改的是副本并不是传递过来的属性；

数据缓存

---

这个场景是这样的，当把产品加入购物车后，关闭小程序，此时如果再打开，显然加入过购物车的商品必须是依旧存在的，那么为了获取之前加入到购物车的商品，就需要商品加入购物车的同时，将商品列表加入本地缓存中；

小程序的缓存是storage，类似web中的localStorage，具体可以查看官方文档数据缓存；

概述

查看缓存

设置缓存

通过wx.setStorage()设置缓存内容，比如

wx.setStorage({

//key就是属性名

key:“key”,

//data就是对应的属性值

data:“value”

})

读取缓存

通过wx.getStorage()读取缓存内容，比如

wx.getStorage({

//key就是需要读取的缓存的属性名

key: ‘key’,

//当读取成功之后，会执行success回调函数

success (res) {

console.log(res.data)

}

})

删除缓存

通过wx.removeStorage()读取缓存内容，比如

wx.removeStorage({

//需要删除的属性名

key: ‘key’,

//删除成功之后的回调函数

success (res) {

console.log(res)

}

})

案例

当打开购物车页面时，在onShow生命周期阶段，读取缓存中的商品列表，并且假如有商品列表，那么在tab的右上角显示商品数量

效果

代码

/**

• 生命周期函数–监听页面显示

*/

onShow: function () {

//获取缓存数据

wx.getStorage({

//缓存的属性名叫做cartInfo

key: ‘cartInfo’,

//读取成功的时候执行success回调函数

success(res){

const arr = res.data;

//判断获得的数组的长度是否大于0，如果大于0，那么代表有数据的

arr.length > 0 ?

//显示右上角文本

wx.setTabBarBadge({

//下标为2的tabBar

index: 2,

//文本内容是数组的长度

text: String(arr.length)

}):

//如果长度不大于0，那么就删除下标为2的tabBar的右上角文本

wx.removeTabBarBadge({

index: 2,

})

}

})

},

下拉刷新和上拉加载

---

在微信中，其实这两种方法都已经写好了，毕竟这是移动端非常常用的功能

下拉刷新

下拉刷新这个功能，首先必须在json文件中进行配置，否则，即使在方法写了代码，也是不会生效的

{

“usingComponents”: {},

//下拉刷新设置成true，代表需要下拉刷新这个功能

“enablePullDownRefresh”:true,

“backgroundTextStyle”:“dark”

}

之后，在页面的js文件中，和生命周期并列的有这么一个函数

/**

• 页面相关事件处理函数–监听用户下拉动作

*/

onPullDownRefresh: function () {

//微信官方提供的方法，作用是在标题上显示加载状态

wx.showNavigationBarLoading();

const _this = this;

//下拉刷新代表需要重新请求数据，因此这边重新发起请求

wx.request({

//请求地址

url: interfaces.productionsList,

//请求成功以后的回调函数

success(res){

_this.setData({

productionsList:res.data

})

//微信官方提供的方法，因为一旦请求成功有返回了，那么下拉加载动画就不需要了，可以立即隐藏掉

wx.stopPullDownRefresh();

//微信官方提供的方法，隐藏标题上的加载状态

wx.hideNavigationBarLoading();

}

})

},

上拉刷新

上拉刷新其实和下拉加载差不多，当内容滚动到大约距离底部50px的时候，会触发这个函数

/**

• 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

//停止下拉刷新，不管有没有，防止上拉刷新的时候，还有下拉加载的动画

wx.stopPullDownRefresh();

//微信官方提供的方法，作用是在标题上显示加载状态

wx.showNavigationBarLoading();

//向服务发起请求获得数据

wx.request({

url: interfaces.productionsList + “/” + _this.data.page + “/” + _this.data.size,

success(res){

//隐藏标题的加载状态

wx.hideNavigationBarLoading();

}

})

},

用户信息

---

获取用户信息

微信对获取用户信息有严格的要求，具体内容见wx.getUserInfo(Object object)，想要获取用户信息，必须是通过微信提供的开放能力open-type获取，而且必须是经过用户确认同意的，大致流程：

确认当前获取用户信息的api（也就是open-type上的getUserInfo）是否可用

//设置

data: {

canIUse:wx.canIUse(‘button.open-type.getUserInfo’)

}

canIUser，判断当前指定的Api是否可用，返回值是一个布尔值（关于canIUse的更多信息查看canIUse详情），使用的是canIUser中的： c o m p o n e n t . {component}. component.{attribute}.${option} 方式来调用，

• ${component} 代表组件名字，也就是button组件

• ${attribute} 代表组件属性，open-type属性

• ${option} 代表组件属性的可选值，获取用户基本信息的值是getUserInfo

之后，给按钮声明一个属性open-type（关于open-type的值更多请看open-type），值是固定的，getUserInfo代表获取用户信息，之后绑定了一个事件，事件类型是getuserinfo，同时为其添加了一个函数，方法名是getUserInfo，点击按钮后执行了getUserInfo这个方法

<button wx:if=“{{!hasUserInfo && canIUse}}”

open-type=“getUserInfo”

bindgetuserinfo=“getUserInfo”>

获取头像昵称

执行方法后，可以在该方法内获得到用户信息

getUserInfo: function(e){

console.log(e.detail.userInfo);

this.setData({

userInfo: e.detail.userInfo,

hasUserInfo:true

})

}

保存用户信息

虽然说是保存，其实还是获取，比如某个小程序，假如用户没有授权过，那么需要用户点击按钮后授权，如果用户已经授权过了，那么下次打开的时候其实不需要再次授权了，直接可以获取到用户信息，因此在总的app.js中的onLaunch生命周期内，直接去判断当前用户有没有已经授权过，如果授权过，那么直接获取到用户信息，并保存到本地，查看wx.getSetting(Object object)

//app.js

App({

onLaunch: function () {

// 获取用户信息授权列表

wx.getSetting({

//获取成功以后执行success回调函数

success: res => {

//判断是否已经授权过获取用户信息了

if (res.authSetting[‘scope.userInfo’]) {

// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框

wx.getUserInfo({

success: res => {

// 将用户信息存储到全局数据中

this.globalData.userInfo = res.userInfo

// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回

// 所以此处加入 callback 以防止这种情况

if (this.userInfoReadyCallback) {

this.userInfoReadyCallback(res)

}

}

})

}

}

})

},

//设置一个全局的属性，用来存储用户信息

globalData: {

userInfo: null

}

})

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

res => {

// 将用户信息存储到全局数据中

this.globalData.userInfo = res.userInfo

// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回

// 所以此处加入 callback 以防止这种情况

if (this.userInfoReadyCallback) {

this.userInfoReadyCallback(res)

}

}

})

}

}

})

},

//设置一个全局的属性，用来存储用户信息

globalData: {

userInfo: null

}

})

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-WPos7nfd-1715722323370)]

[外链图片转存中…(img-HngSJVS2-1715722323370)]

[外链图片转存中…(img-CNHCJ2aT-1715722323370)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！