美文网首页前端跟我学Web前端之路让前端飞
iKcamp出品|微信小程序|工具安装+目录说明|基于最新版1.

iKcamp出品|微信小程序|工具安装+目录说明|基于最新版1.

作者: iKcamp | 来源:发表于2017-10-16 15:25 被阅读30次

    iKcamp官网:http://www.ikcamp.com

    访问官网更快阅读全部免费分享课程:《iKcamp出品|全网最新|微信小程序|基于最新版1.0开发者工具之初中级培训教程分享》。
    包含:文章、视频、源代码

    第一章:小程序初级入门教程

    工具安装

    在上一节第 8 步所展示的页面中,可以点击 开发者工具 直接进入到下载页面,也可以直接访问 官网下载地址。然后根据自己的设备选择相应的下载
    安装过程不再复述,一路默认。

    下载开发工具

    <a>§ 小程序工具起手</a>

    此教程选择的工具为 mac 平台版本,没差

    1. 打开安装好的 微信web开发者工具 ,需要用 管理员开发者 的微信账号扫码登录。管理员账号 是上一节第 6 步中注册 appID 时,绑定的微信账号。开发者账号可在上一节第 8 步中的 添加开发者 中设置
    1. 登录成功后,选择 本地小程序项目,然后 添加项目
    1. 如果没有注册 appID,也可以开发小程序项目,但部分功能会受限,比如在手机上预览。在这里,我们已经有了 appID
    1. 添加成功后,我们的项目会在 微信web开发者工具 中自动打开并启动,可以在此工具中对代码进行修改、调试、断点、预览,文件有修改的话,项目会实时更新。

    目录说明

    项目生成后,会看到如下结构的目录文件:

    ├─ pages/
    │   ├─ index/
    │       ├─ index.js
    │       ├─ index.wxml
    │       ├─ index.wxss
    │   ├─ logs/
    │       ├─ logs.js
    │       ├─ logs.json
    │       ├─ logs.wxml
    │       ├─ logs.wxss
    ├── utils/             
    │   ├─ util.js
    ├── app.js                  // 必备文件  
    ├── app.json                // 必备文件
    ├── app.wxss
    

    先看下最外层的三个文件:app.jsapp.jsonapp.wxss

    1. app.js
      小程序的主入口文件,类似于我们在模块加载器时代(requirejs/seajs)常常会码一个 main.js 来作为程序的启动入口。如果你有接触过 node - express 技术栈,理解起来会更贴切。注意:<span style="color:red">文件名不可更改</span>
      我们可以在 app.js 里面对小程序在不同生命周期段进行处理,设置小程序里面的 全局变量(比如只请求一次公用的数据,让所有的页面都能用)。
      微信平台 app.js 说明文档

    2. app.json
      小程序的全局配置文件,比如设置小程序有哪几个页面组成(目前是 indexlogs)、窗口表现(背景色等)、设置网络超时时间、设置导航条样式等背景色。注意:<span style="color:red">该文件不可添加任何注释内容</span>
      微信平台 app.json 配置文档

    3. app.wxss
      小程序的全局样式文件,在小程序中,所有的样式文件不再是 .css 后缀,全都需要以 .wxss 作为后缀。与传统的 css 样式相比,wxss 支持 @import 样式导入和像素单位自适应。
      独立页面中的局部样式,请书写在相对的页面文件夹中,后面会有说明。
      微信平台 app.wxss 样式说明文档

    小程序的页面文件

    app.json 文件中配置了当前小程序的两个页面 pages/index/indexpages/logs/logs,可以看到,其实就是 文件的路径+文件名 组成。如果增加一个页面,需要在参数 pages 中把页面的地址配置进去。

    细心的同学可能已经发现一个现象,每个页面文件夹,与里面的文件,名字都一样一样滴。是的,一般情况下,一个完整的页面需要 jswxss(css)wxml(html) 组成。
    比如 index 页面,如果需要对 index 页面进行一些独立的配置,需要像 logs 一样,增加 index.json 文件来保存配置信息。

    来看下 wxml 文件与 html 文件的区别

    <!--index.wxml-->
    <view class="container">
      <view class="userinfo">
        <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
        <block wx:else>
          <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
          <text class="userinfo-nickname">{{userInfo.nickName}}</text>
        </block>
      </view>
      <view class="usermotto">
        <text class="user-motto">{{motto}}</text>
      </view>
    </view>
    

    传统的 html 文件由各种各样的标签组成,而在 wxml 中,可用的标签元素并不多,可以看到这里涉及到了 viewimagetext标签。

    • view 相当于 div,你可以这么去理解。
    • image 相当于 img,这个应该都懂了。
    • text 很明显,用来标注文本的标签,既然是 文本,肯定是 行级元素 了。

    还有一些内置好的组件标签,自带样式和特性,详见 官方文档

    页面样式表 index.wxss

    作用域只在当前页面生效,它可以覆盖 app.wxss 里面的样式规则。可以看到,与平时我们用的样式文件基本没差:

    /**index.wxss**/
    .userinfo {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .userinfo-avatar {
      width: 128rpx;
      height: 128rpx;
      margin: 20rpx;
      border-radius: 50%;
    }
    
    .userinfo-nickname {
      color: #aaa;
    }
    
    .usermotto {
      margin-top: 200px;
    }
    

    页面脚本文件 index.js

    app.js 一样,包含了一个页面的生命周期,声明并处理数据,响应页面交互事件等。

    //index.js
    //获取应用实例
    const app = getApp()
    
    Page({
      data: {
        motto: 'Hello World',
        userInfo: {},
        hasUserInfo: false,
        canIUse: wx.canIUse('button.open-type.getUserInfo')
      },
      //事件处理函数
      bindViewTap: function() {
        wx.navigateTo({
          url: '../logs/logs'
        })
      },
      onLoad: function () {
        if (app.globalData.userInfo) {
          this.setData({
            userInfo: app.globalData.userInfo,
            hasUserInfo: true
          })
        } else if (this.data.canIUse){
          // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
          // 所以此处加入 callback 以防止这种情况
          app.userInfoReadyCallback = res => {
            this.setData({
              userInfo: res.userInfo,
              hasUserInfo: true
            })
          }
        } else {
          // 在没有 open-type=getUserInfo 版本的兼容处理
          wx.getUserInfo({
            success: res => {
              app.globalData.userInfo = res.userInfo
              this.setData({
                userInfo: res.userInfo,
                hasUserInfo: true
              })
            }
          })
        }
      },
      getUserInfo: function(e) {
        console.log(e)
        app.globalData.userInfo = e.detail.userInfo
        this.setData({
          userInfo: e.detail.userInfo,
          hasUserInfo: true
        })
      }
    })
    
    

    下期更新内容:小程序初级入门教程-小试牛刀+发布流程

    iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。


    相关文章:
    听说 2017 你想写前端?
    前端开发者指南(2017)
    翻译连载 |《你不知道的JS》姊妹篇 | JavaScript 轻量级函数式编程

    相关文章

      网友评论

        本文标题:iKcamp出品|微信小程序|工具安装+目录说明|基于最新版1.

        本文链接:https://www.haomeiwen.com/subject/oonkuxtx.html