• 为什么80%的码农都做不了架构师?>>> ...

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

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

    第二章:小程序中级实战教程之预备篇  

    ## 项目结构设计

    教学视频地址:https://v.qq.com/x/page/q05544lzelw.html


    开始前请把 ch2-1 分支中的 code/ 目录导入微信开发工具  

    <br>

    前面的章节中,我们完成了小程序的准备工作,熟悉了小程序的基本配置。接下来的章节,我们就要着手开始一个真正的项目。有没有很激动?其实不难发现,小程序的门槛还是相对比较低的,基本掌握前端开发基础的同学,完成一个简单的小程序不费吹灰之力。  

    <br>

    Step 1. 基本结构

    经过前面几章的学习,我们已经基本知道了小程序的基本配置,不啰嗦,先把基础的项目结构建立起来,先搭架子,在丰富细节。在 /codes/ch2-1 的基础上,我们创建以下文件:

    ├── lib/
    ├── styles/ 
    │     ├── base.wxss 
    ├── pages/
    ├── app.js
    ├── app.json
    ├── app.wxss
    

    <br>

    现在呢,最最基本的框架就已经搭建好了。app.js 是小程序的主逻辑文件,app.json 是小程序全局配置文件,app.wxss 当然就是小程序的全局样式文件了。pages 后面会用来存放小程序的页面。

    • app.js
    let handler = {
        //小程序初始化
        onLaunch () {
            console.log('app init...');
        },
        //小程序全局数据
        globalData: {
            user: {
                name: '',
                avator: ''
            }
        }
    };
    App(handler);
    

    <br>

    app.js 包含了小程序的一些生命周期函数,项目刚开始,我们先从简单的开始,只用到了 onLaunch 生命周期函数。当小程序初始化完成时,会触发 onLaunch(全局只触发一次)。globalData 可以用来存放小程序的全局数据,我们可以在页面中通过 getApp() 方法获取到小程序的实例,通过小程序实例就可以访问到这个全局对象,后面会详细讲解。

    <br>

    • app.json
    {
      "pages": [],
       "window": {
            "navigationBarBackgroundColor": "#fff",
            "navigationBarTextStyle": "black",
            "navigationBarTitleText": "Demo",
            "backgroundColor": "#f8f8f8",
            "backgroundTextStyle": "light",
            "enablePullDownRefresh": false
        },
        "networkTimeout": {
            "request": 10000,
            "connectSocket": 10000,
            "uploadFile": 10000,
            "downloadFile": 10000
        },
        "debug": true
    }
    

    <br>

    小程序的主配置文件的基本结构就已经写好了。当然不是全部的配置文件,可以参考小程序配置API。官方文档已经给出了很详细的解释,这里就不赘述了。

    Tip:debugtrue,可以在调试的时候会有些许帮助,但是提审的时候建议改为 false

    <br>

    • app.wxss
    .green{
        color: #26b961;
    }
    page{
        height: 100%;
        background-color: #f8f8f8;
    }
    

    <br>

    定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 pagewxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

    Step 2. 增加页面

    接下来我们要为小程序增加页面了,小程序的页面存放在 pages 文件夹下面。我们继续完善目录结构

    ├── lib/
    ├── styles/ 
    │     ├── base.wxss 
    ├── pages/
    │     ├── detail/ 
    │     ├── index/
    ├── app.js
    ├── app.json
    ├── app.wxss
    

    <br>

    首先我们在 pages 目录下增加两个文件夹,detailindex,其中 detail 代表小程序的文章详情页面,index 则代表小程序的首页。

    光有文件夹不行,在小程序中,每个页面都有四个文件

    • [name].js 页面的主逻辑文件
    • [name].json 页面的配置文件
    • [name].wxml 页面内容,类似于之前的html文件
    • [name].wxss 页面的样式文件,类似之前的css文件

    Tip: 值得注意的是,每个页面中的这四个文件必须保持同名。

    继续完善文件目录

    ├── lib/
    ├── styles/ 
    │     ├── base.wxss 
    ├── pages/
    │     ├── detail/
    │     │     ├── detail.js  
    │     │     ├── detail.json        
    │     │     ├── detail.wxml      
    │     │     ├── detail.wxss  
    │     ├── index/
    │           ├── index.js  
    │           ├── index.json  
    │           ├── index.wxml      
    │           ├── index.wxss   
    ├── app.js
    ├── app.json
    ├── app.wxss
    

    <br>

    • index.js

    和之前的 app.js 类似,小程序的页面也有对应的逻辑文件,比如 index.js 就代表该项目中的首页的逻辑(小程序的首页不一定非要是 index,可以用其他名字)。

    Page({
      data: {
        text: "This is page data."
      },
      onLoad: function(options) {
        console.log('小程序加载了')  
        // 生命周期函数--监听页面加载
      },
      onReady: function() {
        // 生命周期函数--监听页面初次渲染完成
      },
      onShow: function() {
        // 生命周期函数--监听页面显示
      },
      onReachBottom: function() {
        // 页面上拉触底事件的处理函数
      },
      // 其他一些业务函数
      hello: function() {
        this.setData({
          text: 'hello world'
        })
      }
    })
    

    <br>

    Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。

    • index.json

    每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面的配置比 app.json 全局配置简单得多,只是设置 app.json 中的 window 配置项的内容,页面中配置项会覆盖 app.jsonwindow 中相同的配置项。

    页面的 .json 只能设置 window 相关的配置项,以决定本页面的窗口表现,所以无需写 window 这个键。因为本项目比较简单,可以先使用全局的配置。暂时可以放一个空的 json 对象

    { }
    

    <br>

    • index.wxml

    .wxml 就是小程序的页面文件了,WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。

    <view class="home"> this is home page </view>
    

    <br>

    • index.wxss

    WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。这里的样式基本和之前 css 的语法一致,可以覆盖 app.wxss 中定义的样式。

    .home {
        color: red;
        font-size: 28rpx;
    }
    

    <br>

    同样的 detail 页面也会拥有类似的结构和代码。

    完成了上面的基本的页面,仔细的同学可能还发现,上面的 app.json 配置中,pages 还是空的,接下来补充配置。

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

    <br>

    pages 就是小程序的路由配置,这里可以看到,小程序拥有两个路由,一个首页,一个详情页面。

    至此我们就完成了最简单的页面的配置,到现在为止,我们就能很容易的跑出一个简单的微信小程序了,虽然还只是最基本的骨架,后面会继续完善。

    Step 3. 一些非必要目录

    上面介绍了小程序的必要的项目结构,其实在实际的项目中,为了开发方便,我们一般还会增加一些额外的目录,比如:

    ├── lib/
    ├── styles/ 
    │     ├── base.wxss 
    ├── pages/
    │     ├── detail/
    │     │     ├── detail.js  
    │     │     ├── detail.json        
    │     │     ├── detail.wxml      
    │     │     ├── detail.wxss  
    │     ├── index/
    │           ├── index.js  
    │           ├── index.json  
    │           ├── index.wxml      
    │           ├── index.wxss  
    ├── app.js
    ├── app.json
    ├── app.wxss
    

    <br>

    lib 文件夹和 styles 文件夹。文件夹不是小程序的必要配置,前者用来存放项目中用到的其他库,后者可以存放一些基础样式文件。当然,你也可以根据自己的需要来增加一些别的文件夹来便利开发。

    这里我们放置了一些文件,lib 中放置了实现 Promise 的库和解析 html 为小程序 WXML 的库。styles 中放置了公用的重置样式。

    <br>

    下一节中,我们讲一下这个实战项目中用到的一些公用方法,比如打印日志功能、网络请求环境等

    上一篇-iKcamp出品|微信小程序|小试牛刀(视频)+发布流程|基于最新版1.0开发者工具初中级教程分享

    下期更新内容:小程序初级入门教程-第二章:小程序中级实战教程:预备篇-提取 util 公用方法

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


    相关文章: 听说 2017 你想写前端? 前端开发者指南(2017) 翻译连载 |《你不知道的JS》姊妹篇 | JavaScript 轻量级函数式编程 翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

    转载于:https://my.oschina.net/ikcamp/blog/1552313

    展开全文
  • 为什么80%的码农都做不了架构师?>>> ...
  • 微信开发者工具很好的集成了java的开发环境,是java初学者很好的练手软件。准备条件:注册微信小程序开发者账号,需要用到微信账号。 网址:https:...
  • 微信Web开发者工具详解 2019-05-23 19:51:08
    一、微信小程序web开发工具下载地址   1.1 在微信公众平台-小程序里边去下载开发工具下载地址。 1.2 下载后安装一下就可以使用了: 二、创建项目   2.1 微信小程序web开发工具需要扫码登陆,...
  • 微信小程序学习总结 2020-02-22 20:48:16
    因疫情严重,近日在家学习了微信小程序的开发,写这边文章对学习过程进行一个总结,希望疫情早日退散,中国加油,逆战加油???? 简易教程—介绍小程序开发的一些基本情况 开发方式,项目目录等等,看完这些,基本能...
  • 最近微信发布了微信小程序内侧,各位程序员们是不是早就想一展身手,跃跃欲试。 但是目前还没有完全开放,所以我们还是先看看微信公众相关的开发,做好准备,等待微信小程序全面开放,到时候期待各位程序员们可以...
  • swiper是温馨小程序里面提供实现轮播图效果的一个的很好的组件,使用非常简单。 下面直接看我的代码 data: {  imgUrls: [  'http://img4.imgtn.bdimg.com/it/u=853537835,3029652797&fm=23&gp=0.jpg', ...
  • 下载 微信开发者工具 最新版-&amp;amp;gt;下载地址 下载 CocosCreator 最新版(我用的V2.1.0)-&amp;amp;gt;下载地址 去 微信公众平台 注册一个账号,记得选择账号用途 小程序 -&amp;amp;gt;注册地址...
  • 1.微信开发者工具 .首先要区分几个网站: 1.微信公众平台 在这个网站上可以在小程序的开发流程中按照指示下载微信开发者工具 添加合作者 实时查看小程序流量等 重点是可以查看小程序的AppID (也就是小程序ID),...
  • 一文读懂微信小程序开发工具、项目结构、全局配置文件及页面跳转 一文读懂微信小程序开发wxml、json、js、wxss四类核心文件 微信小程序开发抽取HTML种数据的最快方法是正则表达式,而不是循环 微信小程序开发实例---...
  • 开始前请把 ch3-2 分支中的 code/ 目录导入微信开发工具 修改 index.js 文件,引入我们需要的外部资源 'use strict'; import util from '../../utils/index'; import config from '../../utils/confi...
  • 而小程序的特点就是规模小,为了不让用户在使用小程序时造成困扰,微信小程序规定页面路径只能是五层,请尽量避免多层级的交互方式。 页面跳转的话就涉及到了多个页面层级第一种:wx.navigateTo(OBJECT) 保留当前...
  • 微信小程序入门教程+案例demo尊重原创,转载请注明...认清微信小程序开发其实,我觉得小程序就是将微信官方提供20+个基础组件(目前有26个)进行排列组合,然后加上一些css样式,对用户的操作进行反馈(调微信官方提...
  • 这两天公司安排研究微信小程序开发(我们是想ionic直接或间接转换成微信小程序....),幸亏微信开发者工具支持TypeScript,所以这个“转换”还是有戏的。之前也看了uni-app,人家那个才叫牛,一套程序(基于vue.js)...
  • 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。我们这里用微信web开发工具设计开发学生评教系统首先设计学生登陆界面在pages里面创建一个新的项目在wxml...
  • 我是软院的大一生,抱着对计算机的浓厚兴趣和学习新技术热情,我便应同学邀请组队参加全国微信小程序开发大赛(大概就是这个名字把,错了别打我【doge】),于是,便开启了长达3个月的四处碰壁之路。 开发过程 4月
  • 随着微信对小程序对发力,拥有独立app或者有想法的的团队都开始布局微信小程序。而过去的2018年中,个人觉得最有看点都还是微信小游戏。18年的头部几款小游戏最高都流水已经过亿,相对于应用型、工具型小程序,变现...
  • 视频教程四个基本工具介绍不方便看视频的伙伴,我这里准备了图文版教程,Cocos Creator 微信小游戏开发,我们需要使用到基本的4个工具:Cocos Creator:...
  • 在 2018 微信公开课 Pro 上,微信游戏产品总监孙春光指出,小游戏的累计用户达到了 3.1 亿(微信日活超过 9 亿)。 孙春光表示,2017 年移动游戏的自然人有 4 亿多,他们用 20 天就达到了这样一个数据。 作为微信...
  • 0 前言 最近的工作重心一直在小程序,也开发了几个小程序,对小程序开发的流程及相关技术相对比较熟悉,在开发过程中也总结了一些心得经验、了解一些小程序文档上没有的东西、踩了一些坑。所以想着写篇文章记录下来...
1 2 3 4 5 ... 20
收藏数 3,448
精华内容 1,379