preface

  • Recently I am learning wechat small program development, so I cooperated with several classmates to create a micro program imitating JINGdong shopping. I am mainly responsible for my interface. Here I would like to share my learning process, welcome to communicate with you.

The development of preparation

  • Wechat developer tools
  • Visual Studio Code
  • Have a good vant component library
  • WeUI component library
  • Fiddler4 (Capture tool for image)
  • Mark Man(Color measurement software)

The overall architecture

| | - components custom components - dialogDate select date of birth gender | | - dialogGender choice - dialogImg replacement head | - dialogName modify nickname | | - config data - config. Js icon | | - images - my | - pages | | - my my interface page - set account Settings interface | - person personal information interfaceCopy the code

Effect of the project

I interface

  • Here I need to customize the top style for my interface by adding a line of code to my.json
"navigationStyle": "custom"
Copy the code

Header navigation gradient

  • The header navigation bar has a drop down gradient effect, which I did by changing the opacity of the header navigation backgroundopacityTo implement the
<! <view class="page_nav"> <view class="nav" style="opacity: {{num}} "> < / view > < the view class =" title "> I < / view > < view >Copy the code
onPageScroll(e){
    // console.log(e.scrollTop);
    this.setData({
      num: (200 - e.scrollTop) / 200})},Copy the code
  • OnPageScroll listens to the event of the user sliding the page. The parameter object crollTop represents the vertical scrolling distance of the page. Js data binding will change the value of opacity, so as to achieve the gradient effect of the navigation bar in the drop-down head of the page.
.page_nav {
    height: 11vh;
    width: 100%;
    position: fixed;
    background-color: #fff;
}
Copy the code
  • Because when the page is pulled down a certain distance, the background of the header navigation bar is white instead of pure transparent, so don’t forget to set the background color.

The page data

  • The page data is stored in config.js, and the module interface is written in the module.module.exportsProvides methods to expose interfaces. And then into JSrequireExport data.

<! <view class="order-box"> <view class="order-list" wx:for="{{order}}" wx:key="id"> data-id="{{item.id}}"> <image mode="aspectFill" class="order-imgbox" src="{{item.icon}}"/> <view class="order-title">{{item.name}}</view> </view> </view> <view class="border"> <image class="border" src=".. /.. /images/my/ border-.png "></image> </view> <view class="viewticket">Copy the code
  • The body of the page is written in a wX :for loop. The elastic layout is used whereflex-wrap: wrap;Allow the elastic box elements to disassemble as necessary.

Account Setting interface

The page layout

  • The account setup page uses the Cell component of the WeUI component to create a page quickly.
<mp-cells> <mp-cell link> <view> <view> <view class="footer" slot="footer"> </view> </mp-cell> <mp-cell link> <view> <view> <view> <view class="footer" slot="footer">Copy the code

Personal information interface

Component declarations

  • Pages using WeUI components, Vant components, and custom components are declared. The van-toast text prompt component is the prompt for clicking the user name, while the wx.showtoast text prompt is wrapped when it exceeds a certain number of text.
"usingComponents": { "mp-cells": ".. /.. /miniprogram_npm/weui-miniprogram/cells/cells", "mp-cell": ".. /.. /miniprogram_npm/weui-miniprogram/cell/cell", "dialogName": ".. /.. /components/dialogName/dialogName", "dialogImg": ".. /.. /components/dialogImg/dialogImg", "dialogDate": ".. /.. /components/dialogDate/dialogDate", "dialogGender": ".. /.. /components/dialogGender/dialogGender", "van-toast": "@vant/weapp/toast/index" }Copy the code

Custom Components

dialogImg

  • The disadvantage here is that it can only be implemented simply to change the avatar, there is no uploading the avatar to the cloud to save.
// dialogImg.js changeimage() { var _this = this; Wx. chooseImage({count: 1, // default 9 sizeType: ['original', 'compressed'], // specify sourceType: ['album', 'camera'], // Specify the source of the album or camera, default both success: Function (res) {function(res) {// Return the local file path of the selected photo. res.tempFilePaths }) } }) this.triggerEvent('ImgEvent', this.data.pic); // console.log(this.data.pic, '----'); },Copy the code
//  person.js
ImgEvent(e) {
    console.log(e.detail);
    this.setData({
      pic : e.detail 
    })
  },
Copy the code
  • The parent component passesthis.triggerEvent()Get the value PIC passed by the child component, as for the following components. The first argument to this.triggerEvent(” “,{},{}) is the custom event name, which is the name of bind when the page calls the component, and the second object is the desired state and value.

dialogName

getInputValue(e){ // console.log(e.detail) this.setData({ name: e.detail }) }, */ _cancelEventName(){// Trigger the cancelEvent callback this.triggerEvent("cancelEvent")}, _confirmEventName(){// Trigger the successful callback this.triggerEvent("confirmEvent"); this.triggerEvent('myevent', this.data.name); console.log(this.data.name, '----'); }Copy the code
  • Bindinput =’getInputValue’ Gets the contents of the input box. The printable result is as follows: e.daile. value is the input value and e.Daile. cursor is the input character length. The entered value is passed to the parent component by clicking ok and then displayed. It is recommended to follow up the data transfer with console.log().
Myevent (e) {console.log(e.log); // person.js // Get the value passed by dialogName. If (e.dail.cursor < 3) {// wx.showToast({// title: 'not ok, please re-enter ', // icon: 'none', //}) Toast({message: Duration: 2000})} else {this.setdata ({name: e.detail.value }) app.globalData.name = this.data.name; } // console.log(this.data.name);} // console.log(this.data.name); // console.log(app.globalData.name); }, onShow: function () { this.setData({ name: app.globalData.name }) },Copy the code
  • Multiple pages share the same data nickname, and after the nickname is modified, each page updates the nickname synchronously. Because globalData stores global objects in the applet, data used by multiple pages can be synchronized into globalData.

dialogGender

<! -- wxml --> <van-popup show="{{isShow}}" round position="bottom" custom-style="height:50%" Bind :click-overlay="_cancelEventGender"> <view class="header"> <view class="title"> Gender </view> <image class="x" src=".. /.. /images/my/dialog-cancle.png" bindtap="_cancelEventGender"/> </view> <view class="content"> <van-picker show-toolbar="{{false}}" columns="{{ columns }}" default-index="{{ 2 }}" bind:change="onChange" ></van-picker> </view> <view class="footer"> <button class="btn1" catchtap="_cancelEventGender" style="width:350rpx" </button> </view> </view> </van-popup> //.js data: {isShow: false, columns: [' male ',' female ',' private '], value: "}, onChange(e) {console.log(e.type); this.setData({ value: e.detail.value }) },Copy the code

dialogDate

<van-datetime-picker
    type="date"
    value="{{ currentDate }}"
    item-height="46"
    min-date="{{ minDate }}"
    max-date="{{ maxDate }}"
    bind:input="onInput"
    formatter="{{ formatter }}"
    show-toolbar="{{ false }}"
    visible-item-count="5"
    />
Copy the code
  • When the van-datetime-picker date component sets the date range, instead of minDate to maxDate, the miniprogram displays the range one month later. The component range here is January 1, 1900 to December 28, 2030. OnInput is triggered when the value changes to get the selected date.
  • New Date() returns the time, getFullYear() returns a four-digit year from the Date object, getMonth() returns the month (0-11) from the Date object, and getDate() returns a day (1-31) in a month from the Date object.
data: { isShow: false, minDate: new Date(1900, 0, 1).getTime(), maxDate: new Date(2030, 11, 28).getTime(), currentDate: New Date().getTime(), formatter(type, value) {if (type === 'year') {return '${value}'; } if (type === 'month') {return '${value} month'; } return '${value} day'; },}, /** * list of components */ methods: {onInput(event) {// console.log(event); var time = event.detail var date = new Date(time) // console.log(date); let year = date.getFullYear() let month = date.getMonth() + 1 let day = date.getDate() console.log(year, month, day); if (month >= 1 && month <= 9) { month = `0${month}` } if (day >= 1 && day <= 9) { day = `0${day}` } this.currentDate = ${year} ${month} month ${day} day 'this.setData({currentDate: event.detail,}); }, hideDialog(){this.setData({isShow: false})}, showDialog(){this.setdata ({isShow: false})}, true }) }, _cancelEventDate() { this.triggerEvent("cancelEvent") }, _confirmEventDate() { this.triggerEvent("confirmEvent"); this.triggerEvent("dateEvent", this.currentDate); console.log(this.currentDate, '---------'); }}Copy the code

The source code

Source code of this project

conclusion

  • If you think you have some help after reading, you might as well click 👍! If there is something wrong with the article, please feel free to correct it.