微信小程序第二战

学习引入和使用样式库
学习使用数据渲染插入
学习获取用户个人信息
学习玻璃窗户面板设计

1.样式库引用（使用Vant Weapp）Vant Weapp.官方网站

在平时工作时肯定是要运用到某些样式库，可以帮助我们更高效快捷的开发自己项目。

1.通过 npm 安装

npm i @vant/weapp -S --production

其实Vant Weapp上面有详细的引入的教程这里我也就不重复了

如何使用
里面有哪些坑

使用还是狠简单的像下图在自己当前页面里面的json文件里面配置

{"usingComponents": {//对象名就是标签名"button": "../../miniprogram_npm/vant-weapp/button/index","van-notice-bar": "../../miniprogram_npm/vant-weapp/notice-bar/index","van-toast": "@vant/weapp/toast/index","van-icon": "@vant/weapp/icon/index"}
}

在这个usingComponents对象里面对象名是标签名，后面是样式组件的路径还是很好理解的，不过在这里标签名是可以自己定义的，我觉得这一点非常好，可以更快速的编写html代码了。（对象名就是标签名）

同时又有哪些坑呢？

无法构建npm包，提示没有可构建的NPM包

当时我明明通过npm i @vant/weapp -S --production下载了却提示没有可以构建的NPM包！这是什么意思，原来是没有初始化项目。

在小程序根目录下打开cmd 输入npm init -f 初始化命令 -f　　表示全部输入默认值会生成一个package.json文件

继续输入命令：npm i vant-weapp -S --production 导入vant-weapp包

构建npm包在设置里面

有些组件是需要在JS里面引入才可以使用的

//轻提示
import Toast from '@vant/weapp/toast/toast';

还有个别的组件在官方网上路径是错误的。（遇到过一次，忘了是哪个了）@-@

2.数据渲染插入

数据绑定
this.setData（改变Data数据）
wx.request（接口的使用）

<view "{{text}}"></view>//这是绑定数据

Page({/*** 页面的初始数据*/data: {text: 'Hello World' //data对象赋值},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {//使用接口赋值var _this=this;console.log(_this.data.motto);wx.request({url:'你的接口地址',data: {                   //请求的参数pid: '15',categoryLevel: "name"},headers: {   //设置参数内容类型'Content-Type': 'application/json'},success: function (res) {//成功的回调if (res.data != '' && res != null) {_this.setData({  //_this.setData是改变或插入全局data里的数据categorylevellist:res.data //赋值})console.log(_this.data.categorylevellist);}}})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

(注意)在上面wx.request里面想使用this必须先定义如果没有定义
在wx.request里使用this.setData会找不到全局的data数据

3.获取用户信息

学会以上的方法现在需要知道如何获取用户的信息了，

微信小程序官方网站上面有专业的组件是用来做这个事情的 open-data
open-data方法

但是这里我不用！我想自己通过方法来获取用户信息自己在渲染上去

这里是引用

   */onLoad: function (options) {var _this=this;//在这里先定义wx.getUserInfo({success: function(res) {var userInfo = res.userInfo//用户信息对象console.log(userInfo.avatarUrl,userInfo.nickName,userInfo.gender);//输出_this.setData({//赋值"userInfo.avatarUrl":userInfo.avatarUrl,//头像"userInfo.nickName":userInfo.nickName,//名字"userInfo.gender":userInfo.gender,//0为火星人，性别1为男2为女})}})},

这里我的网名是空字符的原因是因为我微信名字使用了特殊空字符微信，数据接口是没有问题的。

数据渲染

<view>{{userInfo.avatarUrl}}</view>//图片
<view>{{userInfo.nickName}}</view>//名字
<view>{{userInfo.gender}}</view>//性别

个人觉得这个页面设计是真的好看

当然这里我可能设计的有些丑，在页面模块多的时候突然的出现这种玻璃窗口的效果还是会让人眼前一亮的。打字好累啊。下次我在详细的写吧。反正思路就是设置一个背景图片fixed固定定位在里面设置一个DIV让他可以滚动。
将想出现窗口的DIV背景设为半透明，当然形状也不一定是正方形想象一些如果把DIV变成斜线放在页面上滚动的过程看到这个效果是不是很有感觉！

累了不写了下次在继续分享。

微信小程序第二战（样式库的引入使用数据渲染插入和玻璃面板设计）相关推荐

微信小程序第二篇实战
title: 微信小程序第二篇实战 date: 2018-03-08 02:33:00 tags: WeChat category: WeChat description: 微信小程序第二篇实战效果 ...
uni-app微信小程序动态样式设置；微信小程序style行内式无效；微信小程序style行内式编译报错；微信小程序:style设置样式
场景:微信小程序设置动态样式,有些时候是需要用到变量来书写的:但是实际使用发现,行内式书写虽然有效,但是会使得微信小程序的编辑失败:故需要使用动态的v-bind来写动态变量行内式样式(既使用:styl ...
视频教程-微信小程序界面设计-样式入门到精通-微信开发
微信小程序界面设计-样式入门到精通 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. 黄菊华 ¥66.00 立即订阅 ...
微信小程序调用Vant组件库
微信小程序调用Vant组件库 Vant Weapp 微信小程序引入Vant Weapp 调用Vant Weapp组件 Vant Weapp 轻量.可靠的小程序 UI 组件库链接: vant开发指南. ...
微信小程序使用font-awesome图标库
微信小程序使用font-awesome图标库网上看到的方法,亲测成功:参考方法下载font-awesome字体包打开Transfonter网站,上传字体fontawesome-webfont.t ...
微信小程序动态修改样式
前言微信小程序动态修改样式:循环数组显示到页面,点击单独的按钮变换单独样式一.wxml <view class="fb_tips"wx:for="{{arr11 ...
html打开微信搜索页,微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)...
上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面搜索 .search{ width: 80%; } .search_arr { border: 1px solid # ...
微信小程序自定义checkbox样式
微信小程序自定义checkbox样式 checkbox .wx-checkbox-input{width:16px;height:16px;} checkbox .wx-checkbox-input. ...
微信小程序css卡片样式（带阴影效果）
微信小程序css卡片样式(带阴影) 效果图 wxml代码 <view class="card"></view> css样式 .card{width: 90% ...

微信小程序第二战（样式库的引入使用数据渲染插入和玻璃面板设计）