小程序商城地址案例 第1篇
在 my-userinfo
组件中,定义如下的 UI 结构
美化当前组件的样式
在
页面中,为最外层包裹性质的view
容器,添加class=_my-container_
的类名,并美化样式如下
在 my-userinfo
组件中,通过 mapState
辅助函数,将需要的成员映射到当前组件中使用
将用户的头像和昵称渲染到页面中
在 my-userinfo
组件中,定义如下的 UI 结构
美化第一个面板的样式
定义第二个面板区域的 UI 结构
对之前的 SCSS 样式进行改造,从而美化第二个面板的样式
定义第三个面板区域的 UI 结构
美化第三个面板区域的样式
小程序商城地址案例 第2篇
在 my-settle
组件的 methods
节点中声明 settlement
事件处理函数如下
在 my-settle
组件中,使用 mapGetters
辅助函数,从m_user
模块中将 addstr
映射到当前组件中使用
在 store/
模块的 state
节点中,声明 token
字符串
在my-settle
组件中,使用mapState
辅助函数,从 m_user
模块中将token
映射到当前组件中使用
小程序商城地址案例 第3篇
获取用户信息需要用到两个api
(OBJECT)
调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的 会话密钥(session_key)。用户数据的加解密通讯需要依赖会话密钥完成。
(OBJECT)
获取用户信息,需要先调用 接口。
获取缓存需要用到的api
(KEY,DATA)
将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。
下面就是具体实例代码:
我们可以将这段写在公共的页面
小程序商城地址案例 第4篇
为了方便发起请求获取商品列表的数据,我们要根据接口的要求,事先定义一个请求参数对象
将页面跳转时携带的参数,转存到 queryObj
对象中
在 data
中新增如下的数据节点
获取商品列表数据
在 methods
节点中,声明 getGoodsList
方法如下
在页面中,通过v-for
指令,循环渲染出商品的 UI 结构
为了防止某些商品的图片不存在,需要在 data
中定义一个默认的图片
并在页面渲染时按需使用
美化商品列表的 UI 结构
在 components
目录上鼠标右键,选择 新建组件
将 goods_list
页面中,关于商品 item
项相关的 UI 结构、样式、data 数据,封装到 my-goods
组件中
在 goods_list
组件中,循环渲染 my-goods
组件即可
在 my-goods
组件中,和 data
节点平级,声明 filters
过滤器节点如下
在渲染商品价格的时候,通过管道符|
调用过滤器
打开项目根目录中的 配置文件,为
subPackages
分包中的 goods_list
页面配置上拉触底的距离
在 goods_list
页面中,和 methods
节点平级,声明 onReachBottom
事件处理函数,用来监听页面的上拉触底行为
改造 methods
中的 getGoodsList
函数,当列表数据请求成功之后,进行新旧数据的拼接处理
在 data
中定义 isloading
节流阀如下
修改 getGoodsList
方法,在请求数据前后,分别打开和关闭节流阀
在 onReachBottom
触底事件处理函数中,根据节流阀的状态,来决定是否发起请求
如果下面的公式成立,则证明没有下一页数据了
修改 onReachBottom
事件处理函数如下
我是没有太弄明白这里,暂时也没处理,反正都是假的数据
在 配置文件中,为当前的
goods_list
页面单独开启下拉刷新效果
监听页面的 onPullDownRefresh
事件处理函数
修改 getGoodsList
函数,接收 cb
回调函数并按需进行调用