WX applet - 2

Conditional rendering:

wx:if = "{ { newlist.length == 0 }}"

wx:else

Jump routing: bind the click event and execute the jump page

bindtap

data-id="{ { item.id }}" add id

wx.navigateTo

Skip the route and pass parameters, and the next route onLoad life cycle can get parameters. Reach the details page

Jump

catch

 

Details page:

rich-text parses html5 tags, components, and basic content: rich text components

 

 Replace the image with the styled image

public:::

 

Package carousel

1. Create components, Component. properties receive the value passed from the parent

2. Register the component, (register it in the json file of the page in which page it is used)

3. Render components

sub open, sub receive, sub use

Parent registration, parent use (the request is sent from the parent and passed to the child component)

 

Secondary packaging request (speed up development efficiency)

// util.js文件夹下 ajax 方法用来发请求
function ajax(url,method='GET',data={}){
    return new Promise((resolve,reject)=>{
        wx.request({
          url,
          method,
          data,
          success:(res)=>{
              resolve(res);
          }
        })
    })
}
// 导出ajax方法
export default ajax;

// api文件夹下
// 导入二次封装的ajax
import service from '../utils/request'

//一个请求封装成一个函数
export function news_hot(){
  return service('https://mpapi.iynn.cn/api/v1/news/hot');
}
export function news_list(payload = {}){
  return service('https://mpapi.iynn.cn/api/v1/news','GET', payload );
}
export function news_detail(payload = {}){
  return service('https://mpapi.iynn.cn/api/v1/news/'+payload.id,'GET', payload );
}

Authorized avatar, nickname: see here

wx.getUserProfile(Object object) | WeChat Open Documentation WeChat Developer Platform Documentation https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html

 

 

<view class="box" wx:if="{
   
   {!userInfo.nickName}}">
  <button open-type="getUserInfo" bindgetuserinfo="handleClick" style="background-color: #07c160;color: white;">去登录</button>
</view>
<view class="userinfo" wx:else>
  <image mode="aspectFill" src="{
   
   {userInfo.avatarUrl}}"></image>
  <text>{
   
   {userInfo.nickName}}</text>
</view>

/**index.wxss**/
page{
  background-color: #eeeeee;
}
.box{
  padding: 80rpx 0;
}
.userinfo{
  display: flex;
  align-items: center;
  padding: 60rpx;
}
.userinfo image{
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}