微信小程序入门

此处省略安装过程（网上很多可直接），直接写笔记了

WXSS新增了尺寸单位：rpx ，不管什么手机，规定屏幕宽为750rpx 微信底层换算

开发小程序可以将iphone6作为视觉稿的标准。

WXS是脚本语言，结合WXML构建页面的结构，同时它并不依赖基础库版本，可以在所有版本的小程序上运行，它与js不同，并且运行环境与js是隔离的，wxs不能调用js中的函数或方法，也不能调用小程序提供的API。并且不能作为组件的事件回调。

由于运行环境的差异，在ios设备上，小程序内的wxs会比js代码快2-20倍，android上没有差异。

<view> 
 {{m1.message}}
</view>

<wxs module="m1">
  var msg = "hello world";
  module.exports.message = msg;
</wxs>

wxs模块，每个模块都有自己独立的作用域，一个模块要想对外暴露其内部的私有变量与函数只能通过module.exports实现。每个 wxs 模块均有一个内置的 module 对象。

// /pages/tools.wxs

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

<!-- page/index/index.wxml -->

<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

页面输出：

some msg
'hello world' from tools.wxs

在.wxs模块中、wxml文件中引入模块：引用其他 wxs 文件模块，可以使用 require 函数。

// /pages/logic.wxs

var tools = require("./tools.wxs");

<!-- /page/index/index.wxml -->

<wxs src="./../logic.wxs" module="logic" />

module属性是<wxs>标签的模块名，module名不要重复（重复会被覆盖），不同的wxs文件的module名字无影响

module 属性值的命名规则：

首字符必须是：字母（a-zA-Z），下划线（_）
剩余字符可以是：字母（a-zA-Z），下划线（_），数字（0-9）

src属性用于引用时候使用。

<wxs> 模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或 <import> 时，<wxs> 模块不会被引入到对应的 WXML 文件中。

<template> 标签中，只能使用定义该 <template> 的 WXML 文件中定义的 <wxs> 模块。

开发过程中遇到一个小问题：

图片不能使用本地的图片，只能用网络图片或者base64格式图片，base64图片往往会出现一大串，放在wxss中特别不好看，于是可以新建一个js文件，专门用来存放这些base64格式的图片，添加好备注，不要弄乱：

<!--iconPath.js-->
const iconPath = {
  backimg:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAA/UlEQVQ4ja2RPRKCMBCFk1CL4kkAj2RvpY0Frd5RGbgAYDyA6y4hP0C02i1gvtmXzctbeTxdQWDtd6noX29hy7B2nCEPQT/bxvRrVk3zFHRDNzUNA7KeuB77vevX4kN6HejlgoN58lLdYbxJSDwI6HQzOvWcznlybtk5/cHKOqubB37BxVCjE6qQAfxLjP4Pt4aVzexQlCKssijmnM95qV9xblhxZ9600R1otswjO9CsmYcMOMDtgCvzyA54M/dskpHn6gacmRN3g9+p4sycioaHer8DhsxpqY7LYAecmZMe03EvU+RcoiKhqZPTFeM/EdI5XTJlq6yenON5y18PNJVeMb+1ywAAAABJRU5ErkJggg=='
}

module.exports = iconPath;

然后index.js引入这个js文件,onload方法中将iconPath加载到data中：

// pages/.../index.js
const app = getApp();
const iconList = require('../utils/iconPath.js');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    iconList: iconList
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({ iconList: iconList });
  },
...
  
})

this.data.iconPath就是有值的了；页面直接取值：

<view class='content' style='background:url({{iconList.backimg}});'>
...
</view>

先写这么多吧后续再加~