您的当前位置:首页正文

微信小程序创建

来源:华拓网

一、下面简单介绍一下微信小程序:

  • 首先要获取appID,没有的话功能会受限很多。例如没发在手机上预览效果。
  • 下载微信小程序简易教程中的
  • 接着用微信的开发工具打开你刚才下载的源码,按照提示进行就行了。

显示效果如下:

小程序首界面.png

二、这时点击左侧的编辑按钮会看到相目结构如上图。先看最下方的三个文件:

.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件

  1. app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。想了解更多可用 API,可参考
    相关代码:
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
  }
})
  1. app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口�背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。更多可配置项可参考
    相关代码:
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}
  1. 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;
} 

三、疑问:

1. 创建新的项目都怎么创建?

我每次都是都是下载一次上面的官方源码,感觉这个方法太low了,大家有没有好的创建新项目的方式?微信官方没找到创建方式,开发工具也没找到

2. 创建新的文件怎么创建?

以上内容严重参考小程序