微信应用号,小程序开发(下)

5198 查看

接着上一篇微信应用号,小程序开发(上)

这里是一篇实例

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

Paste_Image.png
  • 看一下项目目录的文件。

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

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

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


    Paste_Image.png

    Paste_Image.png
    • 那么尝试些一个小的应用
  • 先在app.json中进行配置,新增一个新的页面,就直接丢到index下

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

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

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

    Paste_Image.png
  • 切换到调试界面点击重启,观看效果

    Paste_Image.png


    Paste_Image.png

暂时就到这里吧,可以还不能在真机上进行测试~唉
参考文档