一、微信web开发者工具

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、微信小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了珲春免费建站欢迎大家使用！

            欢迎使用微信Web开发者工具，通过该工具，你可以更加便捷的调试微信上的网页：
                        1. 你可以使用自己的微信号来调试微信网页授权;
                        2. 你可以调试、检验页面的JS-SDK相关功能与权限，模拟大部分 SDK 的输入和输出;
                        3. 你可以使用 X5 Blink 调试，或者是基于 weinre 的移动调试功能;
                        4. 你可以利用集成的Chrome DevTools协助开发。

二、项目目录结构介绍

                        1.pages(文件夹)
                                    index(文件夹)
                                         index.js(配置页面入口)
                                         index.wxml(配置布局和UI,同html页面)
                                         index.wxss(页面样式文件，同css页面)
                                  logs(文件夹)
                                         log.js
                                         log.json
                                       log.wxml
                                       log.wxss

                            2.utils(文件夹)
                                        util.js

                            3.app.js 定义每个页面的js事件（即各种函数）

                            4.app.json：可自定义每个页面的配置信息
                                            若页面有自己的配置信息(xxx.json)，则由页面目录下的配置信息为准，也就是说页面自己拥有的.json文件会覆盖app.json的内容
        /*app.json-eg*/
        {
                                "pages":{
                                    "pages/index/index",
                                        "pages/logs/logs"
                                },

                                "window":{
                                    “backgroundTextStyle”:"light",
                                        "navigationBarBackgroundColor":"#fff",
                                        "navigationBarTitleText":"WeChat",
                                        "navigationBarTextStyle":"black"
                                }
        }

                    5.app.wxss：可自定义每个页面的样式
                                                        若页面有自己的样式文件（xxx.wxss），则由页面目录下的样式文件为准，也就是说页面自己拥有的.wxss会覆盖app.wxss的内容
                                    /*app.wxss-eg*/
                                    .container{
                                                height:100%;
                                                        display:flex;
                                                        flex-direction:column;
                                                        align-items:center;
                                                        justify-content:space-between;
                                                        padding:200rpx 0;
                                                            box-sizing:border-box;
                                    }

    简单来说：
                                .wxml文件是用来定义页面内容，与网页开发中html页面的效果相同
                                .wxss文件是用来定义页面样式，同样，与css效果相同
                                .js文件是用来定义页面的交互功能（即定义函数），然后利用标签的bindtap属性绑定对应的函数名即可执行你所定义的函数体

 举个栗子：
            /*首先我在index.js文件中（即小程序默认index页面）定义了一个toTest函数，如下：*/
                                     toTest: function(){
                                                        wx.navigateTo({
                                                            url: '../Test/Test',
                                                        })
                                        }
             /* 函数说明：
                                        function wx.navigateTo(object: _navigateToObject): void
                                        保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
            */
           接着，我在index.wxml页面定义了一个button按钮(value为进入测试页面),设置bindtap属性的值为toTest,完成toTest函数和button标签的绑定
                                
                                                    进入测试页面
                                
           ps：其中，testindex是类选择器名字，写在index.wxss页面中
                                                             view标签是一个组件，会在页面上做渲染，称为视图容器，个人觉得类似于div。

    这两个简单的步骤实现了一个点击按钮跳转到相应页面并可以返回原页面的功能。

名称栏目：我的小程序入门笔记（一）目录结构
文章转载：http://chengdu.cdxwcx.cn/article/josjcd.html