小程序开发—第一弹：基础学习

初始页面

写在 pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）。

{
    
    
  "pages":[
    "pages/index/index", //打开小程序显示的第一个页面
    "pages/logs/logs"
  ]
}

引用

模板引用

在 item.wxml 中定义了一个叫 item的 template ：

<!-- item.wxml -->
<template name="item">
  <text>{
   
   {text}}</text>
</template>

在 index.wxml 中引用了 item.wxml，就可以使用 item模板：

<import src="item.wxml"/>
<template is="item" data="{
    
    {text: 'forbar'}}"/>

模板不允许递归调用，C 引用 B，B 引用A，在C中可以使用B定义的 template，在B中可以使用A定义的 template ，但是C不能使用A定义的template

文件引用

include 可以将目标文件中除了 <template/> <wxs/>外的整个代码引入，相当于是拷贝到 include 位置

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

在wxss中引入别的wxss文件

@import '../logs/logs.wxss';

由于WXSS最终会被编译打包到目标文件中，用户只需要下载一次，在使用过程中不会因为样式的引用而产生多余的文件请求。

WXSS

WXSS优先级与CSS类似，权重如下图所示。
权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式。
在这里插入图片描述

view{
    
     // 权重为 1
  color: blue
}

.ele{
    
     // 权重为 10
  color: red
}

#ele{
    
     // 权重为 100
  color: pink
}

view#ele{
    
     // 权重为 1 + 100 = 101，优先级最高，元素颜色为orange
  color: orange
}

view.ele{
    
     // 权重为 1 + 10 = 11
  color: green
}

JavaScript

JavaScript模块化

//test.js,将test.js封装成模块
var multiply1=function(n,k){
    
    
  return n*k;
}
var multiply2=function(n){
    
    
  return n*2;
}
module.exports = {
    
    
  multiply1,
  multiply2
}

// index.js，在index.js中调用test中的函数
var test = require('test.js') //引入test.js文件
console.log(test.multiply1(2,4)) //调用test.js中的函数

全局变量

// a.js
// 定义全局变量
var global = getApp()
global.globalValue = 'globalValue'

// b.js
// 获取全局变量
var global = getApp()
console.log(global.globalValue) // 输出 globalValue

需要注意的是，上述示例只有在 a.js 比 b.js 先执行才有效，当需要保证全局的数据可以在任何文件中安全的被使用到，那么可以在 App() 中进行设置

// app.js
App({
    
    
  globalData: 1
})

// a.js
// 获取 global 变量
var app = getApp()
// 修改 global 变量
app.globalData++  // 执行后 globalData 数值为 2

写入本地缓存

同步操作

try{
    
    
  // 同步接口立即写入
  wx.setStorageSync('key', 'value2')
  console.log('写入value2成功')
}catch (e) {
    
    
  console.log('写入value2发生错误')
}

//获取数据
try{
    
    
  // 同步接口立即返回值
  var value2 = wx.getStorageSync('key2')
}catch (e) {
    
    
  console.log('读取key2发生错误')
}

异步操作

// 异步接口在success/fail回调才知道写入成功与否
写入数据
wx.setStorage({
    
    
  key:"key",
  data:"value1"
  success: function() {
    
    
    console.log('写入value1成功')
  },
  fail: function() {
    
    
    console.log('写入value1发生错误')
  }
})

//获取数据
wx.getStorage({
    
    
  key: 'key1',
  success: function(res) {
    
    
    // 异步接口在success回调才能拿到返回值
    var value1 = res.data
  },
  fail: function() {
    
    
    console.log('读取key1发生错误')
  }
})

修改data中数据

Page({
    
    
  data: {
    
    
    isShow: false,
    isShow1: false
  },
  //错误方式，使用this直接修改只能修改js里面的数据，但不能实时渲染xhtml界面
  changeStatus(){
    
    
    console.log(this.data.isShow);
    this.data.isShow = true;
    console.log(this.data.isShow);
  },
  //正确方式，使用封装的setData函数，能够在修改数据的同时，实时渲染xhtml界面
  changeStatus1() {
    
    
    console.log(this.data.isShow);
    this.setData({
    
     isShow:true});
    console.log(this.data.isShow);
  }
})

浏览器中的JavaScript与Node.js和小程序中的区别

在这里插入图片描述