WeChat Applet News Site List Page

Header navigation colors for all files can be set in app.json

(is a child property of the window property)

 

 

 

 

You can set the navigation color of a specific page individually

(Write the property directly, not the window property)

 

 

 

 

Looking at the official documents, you can see many global properties

 

 

 

Page configurations cover part of the window configuration

 

 

 

 

Add in post.json:

{
  "navigationBarTitleText":"Text and Word"
}

Text that enables navigation

 

 

In applets, sometimes using absolute paths can cause errors, such as import

So when you use absolute paths to make errors, you can try to change to relative paths, which may solve the problem.

 

Data in js is a one-way data binding, data changes in data, automatically updated in wxml

However, data changed in wxml will not be synchronized to js (synchronization can be done through events)

Example:

Define date in posts.js data

 

 

Binding data using double curly brackets in posts.wxml

 

 

display

 

 

setData method binds data

Usually data loaded from the server is placed in the onload function

 

 

In post.wxml, use double curly brackets to bind data

<!--pages/posts/posts.wxml-->
<view>
  <swiper indicator-dots="true" interval="5000" autoplay="true">
    <swiper-item><image src="/images/wx.png"></image></swiper-item>
    <swiper-item><image src="/images/vr.png"></image></swiper-item>
    <swiper-item><image src="/images/iqiyi.png"></image></swiper-item>
  </swiper>  
</view>
<view class="post-container">
  <view class="post-author-date">
   <image src="{{avatar}}" class="post-author"></image>
   <text class="post-date">{{date}}</text>
  </view>
  <text class="post-title">{{title}}</text>
  <image src="{{imgSrc}}" class="post-img"></image>
  <text class="post-content">{{content}}</text>
  <view class="post-like">
    <image src="/images/icon/chat.png" class="post-like-img"></image>
    <text class="post-like-font">{{collection}}</text>
    <image src="/images/icon/view.png" class="post-like-img"></image>
    <text class="post-like-font">{{reading}}</text>
  </view>
</view>

Finish Binding

 

 

There are also operations inside double curly brackets, such as splicing strings

 

 

 

 

Data addition and subtraction

 

 

 

 

Conditional rendering wx-if

The value of wx-if, if converted to true, the element displays; if converted to false, the element does not display

Usually you put a variable and define it in js

 

 

Add wx:if judgment to element, false means no display

 

 

 

 

List Rendering wx-for

First you define the data in the onload function, which is typically an array

 

 

Then use this.setData to transfer the data to the data

Notice!The data passed must be a js object!If it's an array, remember to convert to object form by adding key

 

 

In wxml, wrap the part to loop in a block, the wx:for attribute value fills in the key of the data, and the wx:for-item is an alias for each item of the loop

 

 

Another simpler way to convert an array to an object:

This is an object abbreviation method for ES6, equivalent to {post_content: post_content}

Applet supports es6 syntax

 

 

 

 

 

In addition, wx:for-item="item" can be deleted, and each default alias for a loop is item

If you are using an alias other than item, you must specify it in this property

 

 

Get Index:

 

Of course, if not specified, the default index is index

 

 

Event mechanism of applet--capture and callback

Implement click buttons to jump to another page

This is app.json, and welcome.wxml is displayed by default

 

 

 

 

Events in the applet are needed if you want to click a button and jump to another page

View official documents

 

The event we're going to use here is tap

 

 

In welcome.wxml, add events to elements

Property value is a custom function name

 

 

The function is written in welcome.js

navicateTo is the method used to jump

 

 

You can see that the console has warnings after the jump

 

In general, this warning occurs whenever a wx:for loop is used, regardless of it

If you have to, just add wx:key and give it a value.

 

This way, there are no warnings

 

Use navicateTo to do the jump, after the jump is successful, there is a return arrow on the page, Click to return to the previous page

 

 

redirectTo can also be used to jump, except that there is no return button after the jump

 

 

 

 

Using navicateTo to jump to a new page, the original page executes onhide, hides, and so returns

Using redirectTo to jump to a new page, the original page will execute onunload, uninstall, and therefore cannot be returned

You can add two functions to welcome.js to print a view

 

 

View Documents

 

You can see that there are many callbacks

 

 

Of course, it's better to use redirectTo for the welcome page, because the welcome screen usually only appears when you open it and doesn't go back.

 

catch and bind

Binding events can also use catch in addition to bind

Difference:

Bid Event Bubble

When the parent element is clicked only, the parent element event is triggered, not the child element event

When both parent and child elements are clicked, the child element event is triggered before the parent element event

 

 

 

 

 

 

catch Event Capture

When the parent element is clicked only, the parent element event is triggered, not the child element event

When both parent and child elements are clicked at the same time, only child element events are triggered, and the parent element is not bubbled

 

 

 

 

 

 

Separate business data into separate data files

Create a new data directory, create posts-data.js, and unify all data within it

The applet can quickly format the code by holding down alt+shif+f. If you forget the shortcut, you can press F1 to see all the shortcuts

Exporting data using module.exports

var local_database = [
    {
        date: "Sep 18 2016",
        title: "It's when shrimps and crabs are strong",
        imgSrc: "/images/post/crab.png",
        avatar: "/images/avatar/1.png",
        content: "Chrysanthemum crab is full of fat and tastes autumn.Xu Zhimo,"Look at the first-flowered reeds and eat crabs outdoors,Side by side, it is an elegant thing that you can't miss when you come to Hangzhou in autumn. In Sister Lin's words, it is "both full of chelating and tender jades,",
        reading: "112",
        collection: "96",
        headImgSrc: "/images/post/crab.png",
        author: "White Clothes",
        dateTime: "24 Hours ago",
        detail: "Chrysanthemum crab is full of fat and tastes autumn.Xu Zhimo listed "Looking at the first flower of silver reed" and "Eating crab outside the building" as the elegant thing that you can't miss when you come to Hangzhou in autumn. In Sister Lin's words, "Chelating seal with both tender jades full and fragrant lumps of red fat on the shells". In Shi Shuo Xin Yu, Jin Bizhuo even exclamated "Holding the wine cup on the right, Holding the crab cheese on the left, and patting the floating wine boat, it will be enough for a lifetime."Can you live up to your food and love after a long life?So as a food eater, I suddenly want to recall my taste bud memory.The autumn crab in my memory is the taste of my family, full of deep affection.\n\n Who comes from mountains, lakes and seas, but is confined to day and night, kitchen and love?Mother, thoughtful, intelligent and patient.Before eating crabs, I always take out a few tools and enjoy them very much.Tell us that crabs are cold and need ginger tea to get rid of the cold. In the rice vinegar dish provided, ginger silk and basil are also added, the former drives the cold and the latter increases the aroma.Make chrysanthemum tea, time is quiet, we wait.",
        postId: 0,
        music: {
          url: "http://music.163.com/song/media/outer/url?id=142604.mp3",
            title: "Endless Night-Qi Qin",
            coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000"
        }
    },
    {
        title: "Billy·Lynn's Midfield Story",
        content: ""Ang Lee is a director who will never repeat himself. This film will be the most original Ang Lee's eye-catching new film"Long Half Break in Billy Lynn", officially renamed"No War in Half Field".",
        imgSrc: "/images/post/bl.png",
        reading: 62,
        detail: ""Ang Lee is a director who will never repeat himself. This film will be very original." Ang Lee's eye-catching new film "Long Half Break in Billy Lynn", officially renamed "No War in Half Field".After the trailer's first exposure, it is considered next year's Oscar seed player.The film was adapted from a best seller of the same name.The original novel won the National Book Award.Also BBC It is rated as one of the 12 greatest English novels of the 21st century.The film is about Billy, a 19-year-old Texas boy·Lynn joined the army to participate in the Iraqi War and survived a firefight. Unexpected contact with his comrades became the focus of public attention and was portrayed as a hero.They then returned home to honor them at mid-field breaks in football.This war hero is facing an unprecedented spiritual torment...Why did Li An choose this movie to make?Because Ang Lee wants to challenge an unprecedented technical challenge: at 120 frames per second, 4 K,3D All-round combination of technology has triggered a visual revolution in movies.What do you mean?The so-called "Movie is a lie in 24 frames per second", 24 of which is the number of frames.",
        collection: 92,
        dateTime: "24 Hours ago",
        headImgSrc: "/images/post/bl.png",
        author: "The Maze City",
        date: "Nov 20 2016",
        avatar: "/images/avatar/1.png",
        postId: 1,
        music: {
          url: "http://music.163.com/song/media/outer/url?id=108220.mp3",
            title: "Be possessed-Li Zongsheng",
            coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000002xOmp62kqSic.jpg?max_age=2592000"
        }
    },
    {
        //Press and hold alt + shift + F Code styles can be formatted
        title: "What are we talking about when we talk about economics?",
        content: "Introduction This is often the case when I communicate with students after class and when I know I am reading a topic about "economy":...",
        detail: "1 Introduction\n\n When I communicate with students after class, and when I am aware of reading a topic about "economy", I often encounter situations where some people apply the knowledge of "economic theory" to explain economic events that occur in reality and find that many things do not make sense, or find that the theory tells us that "it is the opposite of what is happening in reality".Other students often tell me: What is the use of economics?To illustrate this, I often explain it in two ways, trying to illustrate what economics is and where its boundaries are in terms of the problem-solving perspective that I am good at and the methods they can understand:\r\n\n2 "Sketch "and" oil portrait "We can draw portraits of people with either sketch or oil portrait.Oil portraits preserve the details and features of all aspects of a character to the maximum extent, while simple sketches ignore many details.Although the sketch ignores many details of the characters, it is still easy to recognize who they are.Why?Because this method retains the most prominent characteristics of a person, we can ignore the secondary features and make a decision about the person.\n\n2.1 "Sketch "For the vast majority of non-economic professionals (with a Master's Degree in Economics or above), the economics people come into contact with are primary microeconomics.So-called primary microeconomics, the "drawing" of economic problems is a "sketch".For example, the univariate one-time demand function widely used in the textbooks of primary microeconomics: y=bx+a,The only variable for demand is product price.But intuitively, we can assert that demand is influenced by more than price in reality, so we can assume that the model depicts economic problems distortedly.However, this distortion is necessary and meaningful because it helps reveal the impact of prices on demand rather than negating other factors that influence demand.",
        imgSrc: "/images/post/sls.jpg",
        headImgSrc: "/images/post/sls.jpg",
        reading: 62,
        collection: 92,
        author: "Know",
        date: "Nov 12 2016",
        dateTime: "Three days ago",
        avatar: "/images/avatar/3.png",
        postId: 2,
        music: {
          url: "http://music.163.com/song/media/outer/url?id=27538254.mp3",
            title: "Daughter love-Wan Xiaoli",
            coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000004Wv5BO30pPc0.jpg?max_age=2592000"
        }
    },
    {
        title: "WeChat·Installation guide for applet development tools",
        content: "These two days of leisure, also installed the "WeChat Fold" development tool to play.Here are some trail messages and experience, and in two days I'll write an article detailing the WeChat applet from a developer's Perspective",
        imgSrc: "/images/post/xiaolong.jpg",
        reading: 102,
        detail: "These two days of leisure, also installed the "WeChat Fold" development tool to play.Here are some trail messages and experience, and in two days I'll write an article detailing the WeChat applet from a developer's Perspective:WeChat Applets can't develop games or live broadcasts. The maximum number of people interested in the Applets is 20 (I'm not sure, but I'm sure it's true, this time it's published) API There are no video components in it.WeChat is too big for Apple to worry about, but WeChat should also make corresponding concessions)Whether WeChat has any discussions with Apple or not is an unknown number, after all, it will AppStore Has a certain impact.Abandoned a lot javascript After the components, the ecosystem has become fairly closed, and WeChat certainly explained that it was for better performance.So we'll wait.The entry to the applet is the three-level menu in WeChat, which is called " Tab Column Discovery to add a "applet" under the game.Anyway, I've never ordered in shopping or games in this column.With Tencent's urinary nature, applets, like service numbers, have different levels of openness in their relationship chains and important functions.Yes, the high quality interface will only be open to Tencent's sons (drip, Jingdong).",
        collection: 92,
        dateTime: "24 Hours ago",
        headImgSrc: "/images/post/xiaolong.jpg",
        author: "A cat is a cat's cat",
        date: "Nov 20 2016",
        avatar: "/images/avatar/5.png",
        postId: 3,
        music: {
          url: "http://music.163.com/song/media/outer/url?id=108119.mp3",
            title: "Dust in The Wind-Wolf",
            coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000001VaXQX1Z1Imq.jpg?max_age=2592000",
        }
    },
    {
        title: "From visual to tactile VR Gloves give you a real touch",
        content: "8 February 29, according to foreign media VentureBeat Reporting, a family named Dexta Robotics The company recently released a new product that promises to revolutionize virtual reality hand tracking and interaction",
        imgSrc: "/images/post/vr.png",
        reading: 102,
        detail: "News, according to foreign media VentureBeat Reporting, a family named Dexta Robotics The company has recently released a new product that promises to revolutionize the way virtual reality hands track and interact.The product name is " Dexmo",It is a futuristic exoskeleton worn on the hand like a glove.It has a large number of built-in components that can work with VR Experience interacting to help you feel the virtual object holding your hands. Dexmo according to Dexta Said, " Dexmo It is a mechanical exoskeleton for your hands.It captures your hand movements and provides immediate force feedback.become pregnant Dexmo,You can feel the size, shape and stiffness of the virtual object.You can touch the digital world."Several products are already on the market to handle hand interaction in virtual reality, and related products are about to enter the market.For example, popular HTC Vive The helmet is equipped with a controller that allows the tracking system to see your hands so that you can use them to interact with objects in a specific experience.Later this year, Oculus Similar hand control products will be shipped Oculus Touch. 10 In January, Sony will also start shipping two PlayStation Move Hand Controller PS VR. Leap Motion Even further: use sensors to track finger and hand movements.",
        collection: 26,
        dateTime: "24 Hours ago",
        headImgSrc: "/images/post/vr.png",
        author: "Dark White",
        date: "Nov 20 2016",
        avatar: "../../../images/avatar/3.png",
        postId: 4,
        music: {
          url: "http://music.163.com/song/media/outer/url?id=188204.mp3",
            title: "Silence is gold-Leslie Cheung",
            coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000003at0mJ2YrR2H.jpg?max_age=2592000"
        }
    },
    {
        title: "IQIYI Chuangwei Launches Strategic Cooperation and Jointly Layouts Open Entertainment Ecology",
        content: "IQIYI and Chuangwei are the leading online video brands in China",
        imgSrc: "/images/iqiyi.png",
        reading: 96,
        detail: "IQIYI and Chuangwei are the leading online video and home appliances brands in China.Both sides have been keen on innovation to provide users with a high-quality service experience and product experience.It is reported that iQIYI and Chuangwei will expand from capital to VIP In-depth cooperation in various aspects such as member services.As a result of this cooperation, IQIYI will invest strategically in Kukai Company, which owns a high-end Internet TV brand under Chuangwei.Starting from the next fiscal year, Skyworth's Internet TV will be preset through the Galaxy Internet TV Integrated Broadcast Control Platform VIP Membership services and related content.This bundled terminal works with VIP The new sales mode of content will greatly enhance the experience of Internet TV end users and give users more choices of high quality content.",
        collection: 26,
        dateTime: "21 Hours ago",
        headImgSrc: "/images/iqiyi.png",
        author: "Dark White",
        date: "Nov 20 2016",
        avatar: "../../../images/avatar/5.png",
        postId: 5,
        music: {
          url: "http://music.163.com/song/media/outer/url?id=152428.mp3",
            title: "Friend-Tan Yonglin",
            coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000004eGsCN3SUheO.jpg?max_age=2592000"
        }
    },
];

var mydata="cyy";

//Export data (multiple data can be exported at the same time)
module.exports = {
    postList: local_database,
    cyy:mydata
}

 

Use require to load JS module files (must be a relative path, not an absolute path!!)

In posts.js, use require to import the data posts-data.js just now, and then use a variable to receive the exported data

Print it out to see the data you get

 

 

 

 

Complete posts.js code

// pages/posts/posts.js
var postsData=require("../../data/posts-data.js");//Introducing data
console.log(postsData);

Page({

  /**
   * Initial data for page
   */
  data: {
    date:"Mar 23 2020"
  },

  /**
   * Lifecycle Functions--Listen for Page Loading
   */
  onLoad: function (options) {
    this.setData({ 
      post_key:postsData.postList
      });//Pass data to data in
  }

})

 

Use of template templates

Extract reusable modules

Create a new directory post-item in the posts directory, then create post-item-template.wxml and post-item-template.wxss in the directory

 

 

post-item-template.wxml

Define a template, the name property is the template name

<template name="postItem">
  <view class="post-container">
    <view class="post-author-date">
    <image src="{{item.avatar}}" class="post-author"></image>
    <text class="post-date">{{item.date}}</text>
    </view>
    <text class="post-title">{{item.title}}</text>
    <image src="{{item.imgSrc}}" class="post-img"></image>
    <text class="post-content">{{item.content}}</text>
    <view class="post-like">
      <image src="/images/icon/chat.png" class="post-like-img"></image>
      <text class="post-like-font">{{item.collection}}</text>
      <image src="/images/icon/view.png" class="post-like-img"></image>
      <text class="post-like-font">{{item.reading}}</text>
    </view>
  </view>
</template>

 

Import template files using import, either absolute or relative

 

When calling a template, the is property specifies the template name, and the data property passes in the data

<!--pages/posts/posts.wxml-->
<import src="post-item/post-item-template.wxml" />

<view>
  <swiper indicator-dots="true" interval="5000" autoplay="true">
    <swiper-item><image src="/images/wx.png"></image></swiper-item>
    <swiper-item><image src="/images/vr.png"></image></swiper-item>
    <swiper-item><image src="/images/iqiyi.png"></image></swiper-item>
  </swiper>  
</view>

<block wx:for="{{post_key}}">
  <template is="postItem" data="{{item}}" />
</block>

 

template is actually just a placeholder and will be replaced at run time

So although there are no styles in the template, there are styles on the page

Can be viewed in the console

 

 

Now you need to separate the related styles from the page into template styles as well

Copy the relevant code from posts.wxss to post-item-template.wxss

.post-container{
  display: flex;
  flex-direction: column;
  margin-top:20rpmx;
  margin-bottom:40rpx;
  background:#fff;
  border-top:1px solid #ededed;
  border-bottom:1px solid #ededed;
  padding-bottom:10rpx;
}
.post-author-date{
  margin:10rpx 0 20rpx 10rpx;
  display: flex;
  align-items: center;
}
.post-author{
  height:60rpx;
  width:60rpx;
}
.post-date{
  margin-left:20rpx;
  font-size:26rpx;
}
.post-title{
  font-size:34rpx;
  font-weight:600;
  margin-bottom:20rpx;
  margin-left:20rpx;
  color:#333;
}
.post-img{
  width:100%;
  height:340rpx;
  margin-bottom:15rpx;
}
.post-content{
  font-size:28rpx;
  color:#666;
  letter-spacing: 2rpx;
  margin:0 0 20rpx 20rpx;
}
.post-like{
  font-size:26rpx;
  margin-left:20rpx;
  display: flex;
  align-items: center;
}
.post-like-img{
  width:32rpx;
  height:32rpx;
  margin-right:16rpx;

 

Then introduce template styles in posts.wxss

Use @import

/* pages/posts/posts.wxss */
@import "post-item/post-item-template.wxss";

swiper{
  width:100%;
  height:600rpx;
}
swiper image{
  width:100%;
  height:600rpx;
}

Tags: Javascript JSON Attribute

Posted on Mon, 23 Mar 2020 14:34:45 -0400 by toshesh