微信小程序-枯木学习笔记-知识技能点

基础知识点

page.json的作用

在page.json中定义首页，含有哪些模块（必须声明），系统名称，tabBar切换栏

{
  "pages":[
    "pages/index/index",
    "pages/home/home",  
    "pages/my/my",      
    "pages/exam/exam",
    "pages/paper/paper",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "在线考试系统",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
      "backgroundColor": "#563624",
      "color": "#ffff",
      "list": [
          {
            "pagePath":"pages/home/home",
            "text":"首页"
          },
          {
              "pagePath": "pages/exam/exam",
              "text": "考试"
          },
          {
              "pagePath": "pages/my/my",
              "text": "我的"
          }
      ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

app.js

全局变量

声明全局变量myhost

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null,
    myhost: "http://localhost:8088"
  }
})

使用

在某个模块的js文件中获取，如page.js
const app = getApp();
const myhost = app.globalData.myhost;

轮播图

样式

代码

    <swiper style="height: 450rpx; width: 100%;" autoplay="true" interval="3000" indicator-dots="true" circular="true">
      <swiper-item>
        <image src="/pages/images/login_2.jpg" style="width: 100%; height:100%"></image>
      </swiper-item>
      <swiper-item>
        <image src="/pages/images/login_3.jpg" style="width: 100%; height:100%"></image>
      </swiper-item>
      <swiper-item>
        <image src="/pages/images/login_1.jpg" style="width: 100%; height:100%"></image>
      </swiper-item>
      <swiper-item>
        <image src="/pages/images/login_4.jpg" style="width: 100%; height:100%"></image>
      </swiper-item>
    </swiper>
    
<view style="width: 100%; height: 2px; background-color: #563624; display: block;"><p style="color: #563624; font-size: 2px;">.</p></view>

交换数据

数据处理

微信中数据处理非常麻烦，因为它分属不同的区域
data数据区，event事件区
事件区不能直接操作数据区的对象，必须做转化，才能加工，最终还必须用setData才能保存处理结果到数据区

const app = getApp();
const myhost = app.globalData.myhost;

Page({
    data: {
        index: 0									//数据区声明
    },
    onLoad(options) {
    },
    upProblem(evt){    //向上按钮
        var index = this.data.index;		//this.data获取数据区的index对象，存储到事件区的对象中
        index--;

        this.setData({
            index: index		//设置事件区数据更新结果到数据区对象中
        })
    }
})

注意Page对象中只支持数据声明、事件（声明周期的、自定义按钮等），
太死板，无法加自定义的方法！

方法中加工完数据如果去改变页面的值

微信由其固定的死方法 setData

    data: {
        student: "",        //考试学生信息
    },


    onLoad(options) {
        //准备学生信息
        var student = wx.getStorageSync('student');
        this.setData({
            student: student
        });

第一个student为数据区data中的数据对象
第二个student为当前区域加工后的对象
要先明白它们的关系，谁是谁

操作本地缓存

设置缓存：key、value
wx.setStorageSync(‘student’, student);

读取缓存：根据key读取缓存中数据
var student = wx.getStorageSync(‘student’);

缓存不会自动清除，下次进来依然在，所以不用时应该将其清除
wx.clearStorage({
success: (res) => {
console.log(“缓存已清理”)
},
})

ajax请求后台

代码

发起POST请求，

        wx.request({
          url: myhost+'/paper/createPaper?id=' + courseid +'&studentid='+this.data.student.id,
          method: 'POST',
          success: (res)=>{
              var list = res.data;
              var resultList = Array(list.length).fill(0);
              this.setData({
                  detailList: list,
                  detail: list[0],
                  resultList: resultList
              })      
          },
          fail(err){
            console.log(err)
          }
        })