微信小程序--国旗头像前端页面实现总结及其他学习总结

一、国旗头像前端页面实现

1.微信小程序开发工具

在微信公众平台选择小程序，在界面中选择合适的开发者工具进行下载


安装完成后就可以开始小程序的制作，因为只是进行部分功能的实现，所以直接使用测试号进行开发。

2.功能实现

根据UI设计同学的设计图稿，将其变为小程序界面展示，接下来总结在界面实现过程中学习到的新知识和遇到的问题以及解决方法。
······························
前端分为.json 后缀的 JSON 配置文件，.wxml 后缀的 WXML 模板文件，.wxss 后缀的 WXSS 样式文件，.js 后缀的 JS 脚本逻辑文件。
json主要负责小程序界面的配置，如上方导航栏颜色，导航栏文字颜色，下方窗口背景色等等（目前只使用到这些）。
学习过网页的人就会知道，网页是由html，css，js所实现的，那么微信小程序中也是类似的，wxml用来描述页面的结构，使用标签，属性等定义和实现相关内容。而和html不同的是，标签的名称不大一样，微信小程序把标签更加简单化，也更加容易使用和上手。还有区别的就是，小程序将渲染层和逻辑层分开来，js只负责管理状态。例如下图中wxml中的条件绑定，在wxml中进行条件的判断，而在js中只是负责将其状态进行保管，在wxml判断之后自行将对应的内容进行显示。

wxss样式与css样式相似，不过在微信小程序也进行了一些升级和修改。新增了一种单位----rpx，可以免去换算的问题，在不同的手机上，由于长宽像素比例的不同，界面展示效果和比例会很不同，而使用rpx单位可以保留原比例，只要交给小程序底层来换算即可。
········································································································································

设置小程序名和导航栏颜色。在app.json中设置，也可在相应界面的.json中设置其界面的相关属性，实现不同效果。

  "window":{
    "backgroundTextStyle":"light",      //下拉loading的样式
    "navigationBarBackgroundColor": "#000",      //导航栏背景颜色    
    "navigationBarTitleText": "国旗头像",      //导航栏文字
    "navigationBarTextStyle":"white"    //导航栏文字颜色
  },

········································
设置界面背景颜色，在app.wxss中写入以下代码以改变小程序所有界面的背景颜色，也可在页面的wxss设置当前页面的背景颜色。

page{
  background-color:#cce3ed;
  height:100%;
  }

········································
使用flex弹性布局，项目排列的方向为从左到右，垂直居中，实现以下如图的横向布局。

.content{
  display: flex;
  flex-direction: row;   //横向布局
  align-items: center;
  justify-content: center;
  margin-top: 70px;
}

········································
左右两个箭头按钮，为了使按钮为图片，需要在按钮中嵌套image便签进行图片的显示，设置好按钮的大小和图片的大小，并设置按钮背景为透明，并且无边框。将按钮背景设为图片，图片不会自适应按钮的大小而进行缩放，需要自己设置图片的大小以适合按钮的尺寸，也就是图片的长宽和按钮相同。（注意：若使用下方代码实现按钮无边框，在wxml中不能使用 plain=“true” 使按钮透明，会导致无边框代码无法生效，需要在wxss中设置按钮的透明）

 <button class="next" bindtap="next">
 <image src='../../images/btn2.png'></image>
 </button>

/**设置按钮的图像**/
.next image{
  width: 60rpx;
  height: 60rpx;
}
/**按钮无边框**/
.next::after {
  border: 0;
}

········································
下方按钮，微信官方文档中对于按钮有很多可使用的按钮类型，但是因为使用了type属性，所以不能对其按钮中的文字进行颜色的修改，而UI设计中设定的按钮文字是黑色，所以还是选择自己通过样式设定实现按钮。边框的实现和文字的居中显示，是完成这两个按钮所需要实现的重要环节。想要文字居中，需要设置行高与按钮高度相等，也就是height=line-height。边框主要是设置border的相关属性，类型，宽度和颜色。

/**按钮css**/
.btn-update{
  width: 450rpx;
  height: 70rpx;
  font-size: 15px;         //文字大小
  margin-top: 250rpx;
  margin-bottom: 30rpx;
  line-height: 70rpx;      //设置文字居中，数值和按钮的宽度相同
  color: #000;             //按钮文字颜色
  border-style: solid;     //边框类型
  border-width:1px;        //边框宽度
  border-color:#1aad19;    //边框颜色
}
/**按钮无边框**/
.btn-update::after{
  border: none;
}

········································
左右按钮进行图片的切换，运用到wxml的条件渲染，左右按钮分别绑定事件处理函数，点击左右按钮进行变量lengh数值的变化，根据其变化，渲染不同的四张国旗图片。需要注意图片的循环，左右按钮分别需要判断是否到第一张或者最后一张，若是，则将lengh改为4或1，进行最后一张或第一张的显示。没有判断会出现lengh数值无法找到对应图片，界面中无图片显示的情况。

<image class="image_head" wx:if="{{length == 1}}"
src="../../images/head1.png"></image>

//左切换图片
  previous: function(){
    var length = this.data.length;
    if(length==1){
      this.setData({
        length:4
    })
    }else{
      this.setData({
        length:length-1
    })
    }
  },

········································
跳转页面后如何显示上一页所选中的图片呢，需要传递lengh参数，在新页面中获取其数值后，运用条件渲染将对应数值的图片渲染出来。

 //生成国旗头像按钮的跳转函数--携带参数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs?length=' + this.data.length
    })
  },

//获取跳转携带的参数，显示上一页所选择的图片
  onLoad: function (options) {
    var that = this
    that.setData({
      length: options.length
    })
  },

········································
最后一个小问题，真机调试时看不到图片，需要注意路径中不能包含中文。

二、其他学习

1.tabBar

微信文档示例中实现了一个简单的tabBar，显示文字，设置跳转的页面，点击可切换页面。tabBar是一个数组,只能配置最少2个，最多5个，而且tab栏的顺序是按照数组的排序来的。

而在此基础上可以进行扩展，一般小程序的的tabBar都配有对应的图片，图片通过以下属性设置：

//点击后显示的图片
“selectedIconPath”: “image/btn_1.jpg”,
//未点击时的图片
“iconPath”: “image/btn_1.jpg”,

2.pages

在page.json中编写，它的作用是配置小程序的页面，这个配置项是必填的，它接受一个数组，里面的每一项都是字符串

"pages": [
"pages/index/index",
"pages/logs/logs"
]

每一项分别对应的都是实现文件的路径以及它的文件名。这个配置里面的第一行配置是它的初始页面,例如上面代码的初始页面就是index。

3.页面渲染

在上面的前端页面实现中有提到条件渲染，小程序还有其他的渲染方式。wxml中有数据绑定，条件渲染，列表渲染， 模版，事件， 引用这几种方式。

数据绑定

在.js文件中的Page()注册页面的时候，里面会有一个data属性来定义初始化数据，页面渲染数据绑定的时候就需要调用data里面的数据。视图层接受逻辑层的代码的时候需要用2个大括号把数据的变量名包起来就可以得到该变量名对应数据的值。

条件渲染

条件渲染，就是通过条件来判断是否需要渲染该代码块。条件渲染主要是用到wx:if 和 block wx:if 这两个，既然有了wx:if ，那么我们也会有wx:elseif和wx.else，这几个组合起来，可以使条件渲染更加灵活。第二个是在block里面进行条件渲染，< block>< block/>并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。在多个便签需要进行渲染时，使用block就比较方便。将多个便签作为一个组合，通过判断后一起进行渲染，省去了一个个进行条件判断的麻烦。

列表渲染

和c中的for循环语句是一样的意思，循环输出数组中数据。wx:for绑定一个数组，就可使用数组中各项数据重复渲染该组件，默认数组的当前项的下标变量名默认为index，数组当前项的变量名为item，也可以根据自己的需要来重新定义这两个名字，使用wx:for-item可以指定数组当前元素的变量名，wx:for-index可以指定数组当前下标的变量名，wx:for也可以嵌套。

模板

下图为一个模板的定义，注意设定模板的名称，调用时需要使用到名称。模板调用时使用is=“msgItem” 来调用对应的模板。

引用

如果写好的模板想在不同的页面进行调用，就需要用到引用中的import。引用分为import和include，是两种不一样的应用方式。
在某个wxml中定义模板后，在另一个wxml想要使用，要先<import src="item.wxml">，将有模板的wxml进行导入，再进行调用。
include----<include src="header.wxml"/>是可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include的 位置。拷贝固然固然方便，但也需要注意文件路径和拷贝后样式的问题。

4.跳转页面

单纯跳转

 wx.navigateTo({
      url: '../logs/logs'     //此处为跳转后的页面路径
    })

携带参数跳转

（1）多个参数

注意url中出第一个参数外的变量命名----前面需要加一个&
·····跳转前界面.js

buttonListener: function () {
    wx.navigateTo({
      url: '../logs/logs?nameData=' + this.data.name + '&ageData=' + this.data.age
    })
  }

·····跳转后界面.js

Page({
  data: {
    name: null,
    age: null
  },
  /** 生命周期函数--监听页面加载 **/
  onLoad: function (options) {
    var that = this
    that.setData({
      name: options.nameData,
      age: options.ageData
    })

  }
})

（1）单个参数

wx.navigateTo({
      url: '../logs/logs?length=' + this.data.length
    })

Page({
  data: {
    length: null
  },
  onLoad: function (options) {
    var that = this
    that.setData({
      length: options.length
    })
  },

本文地址：https://blog.csdn.net/Real_hx/article/details/107879281