微信小程序学习笔记

 

只记录在练习的时候遇到的错误情况和一些基础：

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
    WXSS 用来决定 WXML 的组件应该怎么显示。

 

执行顺序：
    微信客户端会先根据 logs.json 配置生成一个界面，顶部的颜色和文字你都可以在这个 json 文件里边定义好。
紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 logs.js

---

1. wx:key

<view wx:for="{{array}}">{{item}}</view>

出现了下面的错误：

VM4851:5 .。。。
 Now you can provide attr `wx:key` for a `wx:for` to improve performance.
> 8 |   <view wx:for="{{array}}">{{item}}</view>
    |    ^
  9 | </view>

官方：wx:key

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

没看懂啊！照着做试试吧！随便给key一个值

<view wx:for="{{array}}" wx:key="e">{{item}}</view>

正常输出了。

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

---

2、跳转页面的问题

一、wx.navigateTo({}) ，保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回。
二、wx.redirectTo() , 关闭当前页面，跳转到非tabBar的某个页面
三、 使用组件  <navigator>  示例：  <navigator url='../test/test'>点击跳转</navigator>
四、wx.switchTab ，跳转到tabBar的某个页面

3、js变量定义 let

直接去http://blog.csdn.net/nfer_zhuang/article/details/48781671看看吧

4、小程序中switch控件的大小改变。

通过设置zoom可以等比例改变大小

 .switch switch {
   zoom: 2;
  }

不是调整了图片，是真实扩大了。

 

5、

背景图片在编辑器中可以展示，但是手机预览时无法显示的问题
官方文档
https://developers.weixin.qq.com/miniprogram/dev/api/FileSystemManager.html
借鉴出处
https://blog.csdn.net/qq_36875339/article/details/81086205

https://www.jianshu.com/p/18aaac940df2

  data: {
    background: "/images/water/bg.jpg",
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this

    //利用小程序的接口，将背景图片转换为encoding base64用于手机调试
    let base64 = wx.getFileSystemManager().readFileSync(this.data.background, 'base64');
    that.setData({
      'background': 'data:image/jpg;base64,' + base64
    });

<view class='bd' style='background: rgb(10, 148, 239);background-image: url({{background}});background-repeat:no-repeat;background-size:100%;'>

下面的是页面代码，上面的是js，将背景图片转换成base64编码，然后上传。