微信小程序初步搭建

微信小程序，废话就不啰嗦了，直接来点实在的，各位客官往下看了

1、首先小程序开发工具下载一波，打开之后，新建项目

2、打开来这个文件

 

3、里面有很多配置项：

（1）pages：所有页面的路由都在此处配置，新建文件夹的时候会自动在此处生成，如下

    "pages": [

        "pages/login/index",

        "pages/index/index",

        "pages/logs/logs"

 ],

（2）permission：这个主要是一些需要用户权限的地方，比如当前用户位置

    "permission": {

        "scope.userLocation": {

            "desc": "你的位置信息将用于小程序位置接口的效果展示"

        }

    },

（3）window配置微信顶部栏的一些样式之类的

"window": {

        "backgroundTextStyle": "light",

        "navigationBarBackgroundColor": "#ff0000",

        "navigationBarTitleText": "WeChat",

        "navigationBarTextStyle": "white",

        "onReachBottomDistance": 30

    },

（4）tabBar主要是tab页面的一些配置，

color：颜色，selectedColor：被选中的颜色，backgroundColor：背景颜色，borderStyle：顶部border样式

list为tab页面的数组

pagePath：tab对应的页面路径

text：tab对应的文字

iconPath： tab对应的图片或者icon

selectedIconPath：tab选中状态的图片或者icon

"tabBar": {

        "color": "#666",

        "selectedColor": "#f00",

        "backgroundColor": "#fff",

        "borderStyle": "black",

        "list": [

            {

                "pagePath": "pages/index/index",

                "text": "首页",

                "iconPath": "images/tabbar/page.png",

                "selectedIconPath": "images/tabbar/page1.png"

            },

            {

                "pagePath": "pages/myCustomer/myCustomer",

                "text": "我的客户",

                "iconPath": "images/tabbar/cus.png",

                "selectedIconPath": "images/tabbar/cus1.png"

            },

            {

                "pagePath": "pages/personal/personal",

                "text": "个人中心",

                "iconPath": "images/tabbar/person.png",

                "selectedIconPath": "images/tabbar/person1.png"

            }

        ],

        "position": "bottom"

    }

 

okay，到这里，你的一个基本小程序已经搞定了，可以开愉快地了撸页面

 

奥，对了对了，pages谁在第一个，谁就是默认的页面，小程序主要是xml文件（类似于html），wxss（就是css文件），index.js文件(写脚本的文件)，好了，开始愉快的撸代码吧~~~