微信小程序

微信小程序

全局配置

{
  "pages":[
    "pages/posts/posts",
    "pages/home/home"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

页面配置

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

用于设置小程序的状态栏、导航条、标题、窗口背景色。

 "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#0094ff",
    "navigationBarTitleText": "且听风吟",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh":true,
    "backgroundColor":"#0094ff"
  }, 

属性	类型	默认值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。参见注 2。	iOS/Android 微信客户端 6.6.0，Windows 微信客户端不支持
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 dark / light
backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16
backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16

配置连接地址：

"pages":[
    "pages/index/index",
    "pages/img/img",
    "pages/mine/mine",
    "pages/search/search",
    "pages/demo01/demo01",
    "pages/logs/logs"

  ],

底部展示代码：

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "icon/shouye.png", 
      "selectedIconPath": "icon/_shouye.png"
    },
    {
      "pagePath": "pages/img/img",
      "text": "图片",
      "iconPath": "icon/img.png", 
      "selectedIconPath": "icon/_img.png"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath": "icon/wodedingyue.png", 
      "selectedIconPath": "icon/_wodedingyue.png"
    },
    {
      "pagePath": "pages/search/search",
      "text": "查询",
      "iconPath": "icon/chaxun.png", 
      "selectedIconPath": "icon/_chaxun.png"
    }
  ]

WXML语法参照：

数据绑定：

<view> {{ message }} </view>
Page({
  data: {
    message: 'Hello World!'
  }
})

列表渲染：

wx:for：在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view class="item12" wx:for="{{postsList}}" data-id="{{item.id}}">
    <view class="content">
      <text class="title">{{item.title}}</text>
      <view class="miaoshu">
        <text>{{item.grade}}</text>
        <text class="time">{{item.time}}</text>
      </view>
    </view>
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

条件渲染

wx:if：在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：

<view wx:if="{{condition}}"> True </view>

<block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

wx:key：

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input中的输入内容，switch的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供：

1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

爱诗诗项目：

轮播图：

<swiper class="banner" indicator-dots="{{true}}" indicator-color="orange" indicator-active-color="#fff"
    autoplay="{{true}}">
    <swiper-item>
      <image src="/images/posts/1.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/posts/2.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/posts/3.jpg"></image>
    </swiper-item>
  </swiper>

属性	类型	默认值	必填	说明	最低版本
indicator-dots	boolean	false	否	是否显示面板指示点	1.0.0
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色	1.1.0
indicator-active-color	color	#000000	否	当前选中的指示点颜色	1.1.0
autoplay	boolean	false	否	是否自动切换	1.0.0
current	number	0	否	当前所在滑块的 index	1.0.0
interval	number	5000	否	自动切换时间间隔	1.0.0

总结：

1.swiper 是滑块视图容器，并不是只能作为图片的轮播图

2.swiper 中只可放置swiper-item组件，否则会导致未定义的行为，好比 ul 中只能放置 li 标签一样

3.swiper-item 仅可放置在swiper组件中，宽高自动设置为100%。

4.通过插槽的方式向 swiper-item 组件中放置元素，swiper-item 实现并不知道，所以如上面案例，swiper-item 中放置的图片的尺寸，需要我们自己定义

5.定义尺寸时，需要设置 image 与 swiper 的宽高一致即可，swiper 不用单独设置，因为其默认宽高自动设置为swiper的100%

6.关于属性设置：swiper 组件上有几个属性，如果属性值要求为布尔值，需要使用{{}} 将 true 或者false 包含起来，否则会将值是做字符串，所以，“true” 和 “false” 的布尔值都是“真”，导致无法达到我们期望的效果。
当前图片路径来自本地，实际开发中应该来自后台接口响应的数据

使用字体图标

上面收藏和喜欢使用的是 png 格式图片
1.图片尺寸固定，某些尺寸屏幕上可能造成浪费
2.难以修改颜色
步骤：
1.添加字体图标到购物车
2.添加至项目
3.项目中选择 Font class，然后选择“查看在线字体”，然后生成在线地址
4.地址栏中访问上面地址，查看生成的代码，然后右键另存为，修改扩展名为 wxss，保存到根目录下
5.根目录下新建 app.wxss，使用下面代码引入

@import '/iconfont.wxss'

字体图标完整的修改

<view class="post-like">
      <text class="iconfont icon-shoucang2 post-like-image"></text>
      <text class="post-like-font">{{item.collection}}</text>
      <text class="iconfont icon-xihuan post-like-image"></text>
      <text class="post-like-font">{{item.reading}}</text>
</view>

获取动态数据：

posts.js:

/**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function (options) {
    wx.request({
      url: 'https://www.fastmock.site/mock/feab55dd20334e49edf0d5adb2f79cbe/libai-server/api/posts',
      method:'GET',
      success:(res)=>{
        this.setData({
          postsList:res.data.data
        })
      },fail(err){
        console.log(err)
      }
    })
  },

posts.wxml:

<block wx:for="{{postsList}}" wx:key="id">
    <view class="post-container">
    <!-- 头像和发表日期 -->
    <view class="post-author-date">
      <image class="post-author" src="{{item.avatar}}"></image>
      <text class="post-date">{{item.date}}</text>
    </view> 
    <!-- 标题 --> 
    <text class="post-title">{{item.title}}</text>
    <image class="post-image" src="{{item.imgSrc}}"></image> <text class="post-content">
      {{item.desc}}</text>
    <view class="post-like">
      <text class="iconfont icon-shoucang2 post-like-image"></text>
      <text class="post-like-font">{{item.collection}}</text>
      <text class="iconfont icon-xihuan post-like-image"></text>
      <text class="post-like-font">{{item.reading}}</text>
    </view>
  </view>
 </block>

​ wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。 view1 view2 类似 block wx:if，也可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块。

wx.navigateTo页面跳转：

属性	类型	默认值	必填	说明
url	string		是	需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’
events	Object		否	页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

toToPosts:function(){
    wx.redirectTo({
      url: '/pages/posts/posts',
    })
},

点击图片放大案例

catchtap="previewAvatar" data-img="{{item.avatar}}"

post.js:

previewAvatar(event){
    let imgArr=[]
    this.data.postsList.forEach(item=>{
      imgArr.push({url:item.avatar})
    })
    wx.previewMedia({
      sources:imgArr
    })
  },

属性	类型	默认值	必填	说明	最低版本
sources	Array.		是	需要预览的资源列表
current	number	0	否	当前显示的资源序号
showmenu	boolean	true	否	是否显示长按菜单	2.13.0
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

上拉加载功能：

app.json:

"onReachBottomDistance": 70

post.js:

wx.showLoading({
      title: '加载中',
      mask:true
})

wx.request({
      url: 'https://www.fastmock.site/mock/feab55dd20334e49edf0d5adb2f79cbe/libai-server/api/posts',
      method:'GET',
      success:(res)=>{
        this.setData({
          postsList:[...this.data.postsList,...res.data.data]
        })
        wx.hideLoading()
      },fail(err){
        console.log(err)
      }
})

onReachBottom()

监听用户上拉触底事件。

• 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
• 在触发距离内滑动期间，本事件只会被触发一次。

下拉刷新功能：

app.json:

"enablePullDownRefresh": true

post.js

onPullDownRefresh: function () {
    wx.showNavigationBarLoading({
      title:"刷新中"
    }) 
    setTimeout(()=>{
      wx.stopPullDownRefresh()
      wx.hideNavigationBarLoading()
    },1000)
},

onPullDownRefresh()

监听用户下拉刷新事件。

• 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
• 可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
• 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。