WX小程序 - 2

条件渲染：

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

wx:else

跳路由：绑定点击事件，执行跳转页面

bindtap

data-id="{ { item.id }}" 添加id

wx.navigateTo

跳路由并传参， 下一个路由 onLoad生命周期可以获得参数。到达详情页面

跳

接

 

详情页：

rich-text 解析 html5 标签，组件，基础内容：富文本组件

 

 把图片替换带有样式的图片

公共：：：

 

封装轮播图

1.创建组件，Component。properties接收父传来的值

2.注册组件，（在哪个页面中使用就在哪个页面的json文件中进行注册）

3.渲染组件

子开启，子接收，子使用

父注册，父使用（父中发请求，传递给子组件）

 

二次封装请求（加快开发效率）

// 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 );
}

授权头像，昵称：这里看

wx.getUserProfile(Object object) | 微信开放文档微信开发者平台文档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;
}