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

Posted 2023-02-05 长安紫薯

基础知识点

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)
          
        )