欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

stiller：微信小程序教程入门篇兄弟篇：从零开始完整基础流程 ...

发布：2018-01-27 10:33浏览： 次来源：网络 作者：cola

  • 扫描二维码登录进入微信开发者工具
  • （如下图）新建一个项目，勾选在当前目录中创建 quick start 项目

stiller：微信小程序教程入门篇兄弟篇：从零开始完整基础流程 ...(图1)

  • （如下图）就会出现一个HelloWorld的APP实例。

stiller：微信小程序教程入门篇兄弟篇：从零开始完整基础流程 ...(图2)

  • 编辑菜单就是对于项目文件的编辑和修改，项目目录如下：

stiller：微信小程序教程入门篇兄弟篇：从零开始完整基础流程 ...(图3)

  • 其中调试菜单可以看到你对于代码的修改，每一次的修改需要点击重启服务

stiller：微信小程序教程入门篇兄弟篇：从零开始完整基础流程 ...(图4)

  • 同样，在此菜单出可以选择对于不同机型进行不同的适配，默认是iPhone6和wifi环境下，可以对于不同网络环境和屏幕大小进行APP的优化选择。

stiller：微信小程序教程入门篇兄弟篇：从零开始完整基础流程 ...(图5)

  • 项目菜单，可以用来打开或者新建新的项目，并且对于已经开发好的项目可以上传处理。

stiller：微信小程序教程入门篇兄弟篇：从零开始完整基础流程 ...(图6)

  • 新建一个项目，打开一个HelloWorld

stiller：微信小程序教程入门篇兄弟篇：从零开始完整基础流程 ...(图7)

 
  • 看一下项目目录的文件。

stiller：微信小程序教程入门篇兄弟篇：从零开始完整基础流程 ...(图8)

  • 这个项目目录中，app.js是小应用的基本入口，包含了对于登录接口的调用，获得用户数据

    stiller：微信小程序教程入门篇兄弟篇：从零开始完整基础流程 ...(图9)

     
  • app.json这个文件是对于这个应用外观的一些配置项，包括字体和导航菜单等样式的配置以及对于路由页面的配置

    stiller：微信小程序教程入门篇兄弟篇：从零开始完整基础流程 ...(图10)

    在说一下对于一个完整的页面而言，其实小程序就是对于node和react的打包实现所以基本的一个页面也是采用HTML+CSS得实现方式，那么对于一个页面而言，比如说index页面部分，.wxml，.xss就是包装版的HTML（XML）或是CSS。

  • stiller：微信小程序教程入门篇兄弟篇：从零开始完整基础流程 ...(图11)

    stiller：微信小程序教程入门篇兄弟篇：从零开始完整基础流程 ...(图12)
    • 那么尝试些一个小的应用
  • 先在app.json中进行配置,新增一个新的页面，就直接丢到index下

    stiller：微信小程序教程入门篇兄弟篇：从零开始完整基础流程 ...(图13)

    新建一个hello.wxml和一个hello.js ，因为不做特别的用处，所以直接将index.js的代码copy过来就好了

  • stiller：微信小程序教程入门篇兄弟篇：从零开始完整基础流程 ...(图14)

    同样操作hello.wxml为了区别它和index的不同，给它加上一个<image>标签，随便丢张图片

  • stiller：微信小程序教程入门篇兄弟篇：从零开始完整基础流程 ...(图15)

    Paste_Image.png
  • 再在配置文件app.json中加上一个list作为一个导航链接

    stiller：微信小程序教程入门篇兄弟篇：从零开始完整基础流程 ...(图16)

    切换到调试界面点击重启，观看效果

  • stiller：微信小程序教程入门篇兄弟篇：从零开始完整基础流程 ...(图17)

     

    stiller：微信小程序教程入门篇兄弟篇：从零开始完整基础流程 ...(图18)





免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有