微信小程序入门(一)

微信小程序

微信公众平台

微信公众平台由腾讯提供、基于腾讯的微信服务器，为广大企业、组织或个人提供用户管理或咨询服务的平台。

服务号： 为企业或组织提供的进行用户的管理和服务，侧重于服务。类似中国移动服务号，KFC服务号等。

订阅号： 为企业、组织或个人提供的一种全新的消息传播方式，类似免费的报刊。如CSDN等。

小程序： 为企业、组织或个人提供的可以达到与原生APP相同功能的应用（微信内部运行）。其优点在于用完即走。

小程序的接入流程

在微信公众平台注册开发者账号：https://mp.weixin.qq.com

 

 

填写注册信息：

登录邮箱，接收激活邮件，激活小程序账号：

填写个人主体信息：

 

 

在小程序主页，提交小程序的基本信息。

 

创建小程序项目

安装微信开发者工具IDE。

管理员微信扫码登录，点击+新建小程序项目。

填写项目基本信息：

 

认识开发工具基本布局

 

 

 

小程序项目的文件结构

小程序项目中包含的文件类型有：

1. .json文件 配置文件

               app.json 全局配置文件

               page.json 定义单个页面配置参数。

1. .wxml文件 模板文件（类似于HTML， 但是此处不能使用任何HTML标签）
2. .wxss文件 样式文件（类似于css， 语法与css基本一致）

               app.wxss， 定义全局样式

               page.wxss，定义单页面的样式

1. .js文件 脚本文件（写代码的地方）

               app.js，定义小程序的入口脚本文件

               page.js，定义小程序的单页面脚本文件

 

app.json

app.json用于对小程序进行全局配置。

JSON文件不能写注释

字符串必须在双引号之间。JSON对象的属性名也必须在双引号之间。

数组或对象最后一个成员后不能再写逗号。

JSON中不能存在undefined数据类型。

 

pages属性

pages属性用于指定当前小程序包含哪些页面（index与logs）

"pages":[
    "pages/test/test",
    "pages/logs/logs",
    "pages/index/index"
],

新建配置项"pages/test/test"将会在pages目录下新增test目录，然后再test目录下新建四个文件test.js test.json test.wxss test.wxml。若写在数组的第一个元素，则会被当做首页展示。

window属性

window属性用于设置小程序导航栏、标题、窗口的内容或样式，object类型。

"window":{
    "enablePullDownRefresh": true,    开启下拉刷新
    "backgroundTextStyle":"dark",     下拉刷新背景文本的样式 light
    "backgroundColor": "#0f0",        下拉刷新背景的颜色

    "navigationBarBackgroundColor": "#f00",    导航背景色 支持#111
    "navigationBarTitleText": "学子影院",       导航文本
    "navigationBarTextStyle":"white"           导航文本颜色
},

 

tabbar属性

tabbar属性用于配置小程序的底部选项卡， object类型。

    "tabBar": {
　　 "position": "bottom",     选项卡的位置  bottom  top
    "color": "#333",          文本默认颜色
    "selectedColor": "#f00",  文本选中后的颜色
    "backgroundColor": "#fff",  选项卡的背景颜色
    "borderStyle": "black",     选项卡上边框样式  black  white
    "list": [     定义包含所有选项卡的详细配置
        {
            "text": "首页",      选项卡的文本
            "pagePath": "pages/index/index",  选项卡的目标页面路由
            "iconPath": "/images/index_disable.png",  默认图标路径
            "selectedIconPath": "/images/index_enable.png"
        },
        {
            "text": "影院",
            "pagePath": "pages/theatre/theatre",
            "iconPath": "/images/theatre_disable.png",
            "selectedIconPath": "/images/theatre_enable.png"
        },
        {
            "text": "我的",
            "pagePath": "pages/me/me",
            "iconPath": "/images/me_disable.png",

            "selectedIconPath": "/images/me_enable.png"

        }

    ]

},

注意事项：

1. 如果position属性设置了top， 无法显示图标。
2. list中至少包含2个选项卡，最多5个选项卡。
3. pagePath不能以/开头。
4. iconPath和selectedIconPath不能使用网络路径。
5. 图标尺寸建议81*81，字节数不能超过40K。