逍遥阁

微信小程序的一点入门笔记

关键词: 微信小程序

微信小程序的一点入门笔记

### sitemap.json

小程序的哪些页面可以被搜索引擎收录的配置文件

### project.config.json

项目配置文件，一般是工具勾选操作后自动生成

### app.json

全局配置文件

```
{
    "pages": [
        "pages/index/index"
    ],
    "window": {
        "backgroundTextStyle": "只能是light|dark",
        "navigationBarBackgroundColor": "#ff0000",
        "navigationBarTitleText": "你好",
        "navigationBarTextStyle": "只能是white|black"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
}
```

pages 小程序的所有页面都需要写在这里

window.navigationBarBackgroundColor 小程序可视界面以上状态栏的背景颜色

window.navigationBarTitleText 状态栏的标题

window.navigationBarTextStyle 状态栏的文字颜色

### app.wxss

全局样式

### app.js

全局脚本

```
App({
    onLaunch: function(){
        console.log(this.dry.name);
    },
    dry: {
        name: "test"
    }
})
```

通过this可以引用到其他键

### pages/index目录下文件

```
index.json 配置文件
index.wxss 样式文件
index.wxml 网页代码文件
index.js 脚本文件
```

### pages/index/index.js

```
const app = getApp();

Page({
    data: {
        title: "语文"
    },
    onLoad: function(){
        var temp = app.dry.name + this.data.title;
        this.setData({title: temp});
    }
});
```

1.获取app实例`const app = getApp();`

2.引用全局脚本里面的数据`app.dry.name`

3.Page方法配置里面的`data`键是固定的，相当于是传递给页面的数据，页面通过`{{ title }}`就可以直接取到传递给他的数据

4.通过`this`去引用其他键，如`this.data`

5.通过固定的方法名`setData`去设置数据

### 全局脚本或者每个页面的脚本引用js库

假设项目目录下有文件`lib/math.js`，内容如下

```
function add(x, y)
{
    return x + y;
}

module.exports = {
    add: add
}
```

只需要使用相对路径引入即可

```
var m = require("./lib/math.js");/*全局脚本*/
var m = require("../../lib/math.js");/*页面脚本*/
m.add(10, 90)
```

js库如果需要导出很多的方法，可以这样写

```
var object = {};

object.add = function(x, y)
{
    return x + y;
};

object.reduce = function(x, y)
{
    return x - y;
}

module.exports = object;
```

admin
2019-11-13 22:37:21
weixin

文章分类

文章标签

文章归档

友情链接

微信小程序的一点入门笔记