用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 新手教程 查看内容

微信小程序开发手记《一》:项目的代码结构

天下雪 2017-4-22 00:07

作者:王梵,来自原文地址编码前的准备工作登陆微信开发者账号。如有账号,直接登陆,没有,申请一个即可。输入账号密码登陆时,需要手机扫码确认。查看文档登陆后台后,在网页右上角,点击文档,就能进入文档界面, ...

作者:王梵,来自原文地址

编码前的准备工作

  • 登陆微信开发者账号。 
    如有账号,直接登陆,没有,申请一个即可。输入账号密码登陆时,需要手机扫码确认。

  • 查看文档 
    登陆后台后,在网页右上角,点击文档,就能进入文档界面,与我们密切相关的就是开发模块 

可以看到,在开发模块中又细分了6个子模块。

  • 简易教程 
    这个子模块中有官方提供的组件+API的演示demo,还可以扫码安装demo小程序,同时,也能从这里下载开发工具。

  • 框架 
    这里介绍的是小程序的项目结构

  • 组件 
    介绍所有的组件及使用方法

  • API 
    介绍所有的API,包括获取用户信息,本地缓存,支付功能等。

  • 工具 
    提供小程序开发所使用的小工具的下载地址

  • Q&A 
    提供了一些问题的答案,同时还有开发者社区。

打开开发工具

  • 第1张图是打开开发工具时的第一个界面,需要扫码登陆。
  • 第2张图是扫码成功后的界面,点击第一个小程序开发。
  • 第3张图,在这里可以添加项目,也可以打开之前的项目。如果是第一次打开,那么只有添加项目的按钮,点击添加项目。
  • 第4张图,在第一个输入框内需要使用AppID,获取的方式查看这里。 

     

ok!经过了上面4步,我们终于打开了开发工具 

 
上图展示的是编辑状态下的结构

  • 第2个绿框是小程序运行的界面,相当于模拟器

  • 第3个黑框是项目代码的结构数

  • 第4个黄框是我们编辑代码的地方。

  • 第1个红框中,有如下6个部分

    • 编辑,上面说的就是编辑状态
    • 调试,在这里可以查看控制台,一些打印能在这里看到
    • 项目,这里有一个预览功能,可以通过扫码,将我们的小程序安装到手机上。
    • 编译,顾名思义,就是编译小程序代码。ctrl+s保存代码时,也会编译一次。
    • 后台/前台,前台时展示场景值,也可以在这里查看场景值。
    • 缓存,在这里可以清除3种缓存,数据存储,文件存储,授权数据。

下面,我们说一下项目结构,也就是上图中第3个框和第4个框。

项目结构

这部分对应文档中的框架部分。 
一个完整的小程序,包含描述整个项目的app文件系统(app.js,app.json,app.wxss)和各个page(每个page包含js,json,wxml,wxss)。其中,js文件处理逻辑,json存放配置,wxml存放页面结构,wxss存放样式表。

  • app文件系统 
    app.js,app.json,app.wxss这3个文件放在项目的根目录下,其中app.wxss文件不是必须的,不过一般都会将项目中通用的样式放在这里。

  • page文件系统 
    它包含4个文件:js(必须),wxml(必须),json(非必须),wxss(非必须)。

下面,我们挨个介绍

app.wxss

它是小程序的公共样式表,结构如下,首先是一个小数点.加上别名,之后就是一对大括号,在大括号内设置属性,键值对用冒号分割,键值对后面有分号; 
关于如何使用其中的设置,我们会在页面的wxml时说到。

  1. .container {
  2. height: 100%;
  3. display: flex;
  4. flex-direction: column;
  5. align-items: center;
  6. justify-content: space-between;
  7. padding: 200rpx 0;
  8. box-sizing: border-box;
  9. }

app.json

该文件中存放的公共配置,格式就是json,其中pages是必须要配置的,程序中的每一个页面,都需要在这里配置,否则页面会找不到。 
window属性配置的是一些窗口属性。 
想要看其它的配置,请点击这里。

  1. {
  2. "pages":[
  3. "pages/index/index",
  4. "pages/logs/logs"
  5. ],
  6. "window":{
  7. "backgroundTextStyle":"light",
  8. "navigationBarBackgroundColor": "#fff",
  9. "navigationBarTitleText": "WeChat",
  10. "navigationBarTextStyle":"black"
  11. }
  12. }

app.js

这里处理小程序的逻辑,更详细的内容,请点击这里。

  1. App({
  2. onLaunch: function () {
  3. //调用API从本地缓存中获取数据
  4. var logs = wx.getStorageSync('logs') || []
  5. logs.unshift(Date.now())
  6. wx.setStorageSync('logs', logs)
  7. },
  8. getUserInfo:function(cb){
  9. var that = this
  10. if(this.globalData.userInfo){
  11. typeof cb == "function" && cb(this.globalData.userInfo)
  12. }else{
  13. //调用登录接口
  14. wx.login({
  15. success: function () {
  16. wx.getUserInfo({
  17. success: function (res) {
  18. that.globalData.userInfo = res.userInfo
  19. typeof cb == "function" && cb(that.globalData.userInfo)
  20. }
  21. })
  22. }
  23. })
  24. }
  25. },
  26. globalData:{
  27. userInfo:null
  28. }
  29. })

整个js程序就是一个App方法,onLaunch是回调方法,getUserInfo是自定义方法,globalData是自定义变量。

page的wxml文件

一个文件夹,就是一个页面,如果特别说明,下面说的js文件,wxss文件,wxml文件,json文件都处于同一个文件夹下。

  1. <view class="container">
  2. <view bindtap="bindViewTap" class="userinfo">
  3. <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
  4. <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  5. </view>
  6. <view class="usermotto">
  7. <text class="user-motto">{{motto}}</text>
  8. </view>
  9. </view>

这与xml文件类似,最外面的view标签上有一个class属性,这个属性用于设置view的一些属性,属性值Container则指向这些我们设置的属性集,有2种可能性,一种是自身所在page的wxss文件,另一种则是app.wxss文件,而container属于app.wxss中的配置。

还有一点,在app.wxss中,container前面是有个小数点的,wxml中调用时,不需要小数点。 
第2级中有2个view标签,其中第一个上面有2个属性,class和bindtap,其中class属性与上面说过的一样,它指向了本页的wxss文件,第2个bindtap指的是点击时间,它的属性值是点击时触发的js方法,它位于本页的js文件中,我们来看一下。

  1. Page({
  2. ...
  3. //事件处理函数
  4. bindViewTap: function() {
  5. wx.navigateTo({
  6. url: '../logs/logs'
  7. })
  8. },
鲜花
鲜花 (4)
鸡蛋
鸡蛋

刚表态过的朋友 (4 人)

分享至 : QQ空间
收藏
原作者: 王梵 来自: 原文地址

相关阅读