微信小程序开发者工具app.js

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

微信小程序开发者工具app.js

微信小程序还未正式发布就迅速成为大家讨论的焦点。 所以你可能认为只有收到内测邀请才能体验小程序的开发过程。 事实上，情况并非如此。 每个人都可以体验一下。 我们一起来看看吧。

下载微信网页开发工具

首先，微信为我们提供了自己的小程序集成开发工具。 您只需要从这个页面下载：

下载完成后，打开开发工具，会出现二维码登录界面。 使用微信二维码登录，开发工具会帮助我们创建一个默认项目。 项目的文件结构如下：

所有代码编辑和运行预览都可以在此开发工具中执行。 接下来我们看一下微信小程序的项目结构。

项目结构

如上图，首先根目录下有app.js、app.json、app.wxss三个文件。 其中app.js是程序主入口的脚本文件，app.json是全局配置文件，app.wxss是小程序的样式表文件。

我们先看一下app.json：

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

登录后复制

该配置文件中定义了两个节点。 pages 是小程序所有页面对应的路径，是小程序窗口的配置信息。

我们看一下样式文件app.wxss：

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

登录后复制

我们不需要深入研究它定义的具体样式。 我们只需要先了解项目结构即可。 接下来我们看一下程序的主入口app.js：

//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对象，并定义了三个方法，以及。 我们先来看看：

onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
}

登录后复制

首先，wx. 方法会获取以日志为key的本地缓存数据。 传入该方法的日志没有任何特殊含义，它们只是用来表示我们使用的缓存数据。 这个机制可以理解为类似于iOS。

然后，我们要将当前日期日志（Date.now()）插入到这个缓存数组中。 *后调用该方法将我们新的缓存内容写入到本地缓存中。

因为该方法是小程序的生命周期方法，所以小程序启动时会调用该方法，并记录当前的启动日期并写入本地缓存。 没错，整个方法就是这么做的。

我们再看一下方法。 它通过调用wx.login和wx.login来获取当前用户的登录信息。 两个微信平台函数，传递给回调函数cb：

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

登录后复制

至于*初的if判断if(this..)，我们暂时不需要深究，只看else部分。

页面结构

了解完根目录下的几个文件后，我们来看看页面文件，正如我们在项目结构的**个截图中看到的：

所有页面都位于页面文件夹中。 我们的示例项目中有两个页面索引和日志。 还记得我们之前在 app.json 中看到的页面配置吗：

"pages":[ "pages/index/index", "pages/logs/logs" ]

登录后复制

和我们现在看到的两个目录一模一样。 另请记住，pages 数组中的**个元素将用作小小程序的主页。 请记住，索引页是主页，因为它是页面中的**个元素，而不是因为它的名称是index。

我们先看一下索引页面的组成，index.js、index.wxml、index.wxss。 index.js是页面的脚本文件，index.wxml是页面的UI文件，index.wxss是页面的样式文件。

我们先看一下index.js：

//index.js //获取应用实例 var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  }, //事件处理函数 bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs' })
  },
  onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({
        userInfo:userInfo
      })
    })
  }
})

登录后复制

() 方法来获取我们的应用程序实例。 然后看方法，用我们刚才提到的方法获取用户信息，并设置到data属性中。

该方法将绑定一个事件，该事件调用 wx. 方法。 这个方法其实就是一个页​​面跳转。 从代码中不难看出，它跳转到了日志页面。

这就是脚本文件的全部内容。 我们继续看UI文件index.wxml：

登录后复制

这是小程序索引页的UI文件。 事实上，微信平台定义了一系列组件。 你还记得*外层吗？ 我们在*外层的app.wxss中定义它的样式。 它包含两个视图。 我们先看**个：

登录后复制

首先“”给这个View绑定了一个点击事件，也就是我们之前index.js对应的方法。 当用户点击该View时，会跳转到日志页面。 然后这个View包含一个图像和文本。 Image的src属性设置为.，代表当前用户的头像。 文本与 . 一起使用，代表当前用户的昵称。

这样索引页的整体逻辑就完成了，还有一个index.wxss样式文件，我们暂时跳过。

我们来看第二种观点：

登录后复制

motto实际上是我们在index.js中定义的一个属性：

data: {
    motto: 'Hello World',
    userInfo: {}
 }

登录后复制

它将在页面上显示一个 Hello World。

现在，当我们切换到调试界面时，我们可以看到小程序的首页，它和我们刚才描述的UI一模一样：

这里的用户头像和昵称是从您的登录状态动态获取的。

然后我们在这里点击用户头像，就会跳转到日志页面，里面列出了你每次登录小程序时间点。

上传小程序

现在已经给大家介绍了微信小程序的基本开发流程，还有一个日志页面没有介绍，但它的基本思路和索引页是一样的，就不赘述了。 小程序开发后，我们需要将其部署到哪里呢？ 相信大家都有同样的问题。 答案也很简单，切换到项目选项卡，点击上传按钮：

由于我的环境没有测试账号，所以上传区域显示该项目没有关联AppID。 如果您有测试帐户，则会显示您的 AppID。 目前只有内测账号可以上传小程序。 这是唯一的区别。 如果您没有测试版帐户微信小程序开发者工具app.js，则无法上传，但可以在本地开发和测试。

这种上传小程序的方式可能会让你感觉有些不一样。 大家通常都知道，Web 应用程序通常需要您构建和维护自己的服务器。 小程序的托管方式其实和我们开发原生App时几乎是一样的。 虽然前端使用了js，看起来像Web技术，但其核心思想与传统的Web应用程序不同。 更像是一个类似 React 的实现。

结尾

这次和大家一起，从头到尾彻底体验了一个*简单的小程序的整体结构和开发思路。 个人觉得，如果能找到合适的切入点php开发微信小程序教程，我们还是可以在小程序平台上找到一些好的机会的。 但我的观点是，不要以为小程序的出现会立刻扰乱任何人，也不需要听到网上有人说小程序很难成为一件大事就认为它已经没有机会。 找到自己擅长的和用户需要的，也许就能创造出一些好的产品。 这次我也帮大家做一下基础的技术回顾，希望对大家有所帮助。

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等