微信小程序的吐血日记(1)

最新推荐文章于 2023-03-08 10:31:12 发布

iamzhuwenhui

最新推荐文章于 2023-03-08 10:31:12 发布

阅读量1.9k

点赞数

分类专栏：微信小程序文章标签： css 微信脚本 javascript

本文链接：https://blog.csdn.net/u013632854/article/details/67012571

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

微信小程序的吐血日记

工作需要，开始接触微信小程序，一脸懵逼的踏上挖坑之旅

传送门：

官方网站：https://mp.weixin.qq.com/cgi-bin/wx

开发文档：http://www.w3cschool.cn/weixinapp/

个人感觉填坑最重要的手段，是先去官网找官方文档，里面已经包含诸如接口api、功能介绍等等，在官网找不到的，去w3cschool也可以找到大部分，还有部分不了解的，直接查html、css、js，来一个bug拆一个，绝不手软。

下面来个简单介绍，因为官网都有，我就不多说了

小程序有四种页面，如果你对css之类的有了解，那么下面应该会很好理解，我就是之前没有怎么接触过前段开发，所以一开始做小程序觉得好难啃

xx.js

这个是脚本代码，写逻辑的地方，里面有生命周期的回调

Page({

data:{

onLoad:function(options){

// 页面初始化 options为页面跳转所带来的参数

onReady:function(){

// 页面渲染完成

onShow:function(){

// 页面显示

onHide:function(){

// 页面隐藏

onUnload:function(){

// 页面关闭

}

})

xx.json

这个还没用过

xx.wxml

这个是编辑页面结构的组成

xx.wxss

这个是样式表，给页面各个部件添加样式的，像长宽高之类的

上面那些是你创建每个页面都要有的内容，下面的是公共的内容，是全局的。

----------------------------------------------------下面摘自官网（我看了很多文章，几乎都是照搬官网，还不给个出处，害我还以为小程序大家都玩得这么6，搞得我惭愧了5分钟）

app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。想了解更多可用 API，可参考 API 文档

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this;
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo;
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      });
    }
  },
  globalData:{
    userInfo:null
  }
})

app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。更多可配置项可参考配置详解

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}