跳转到内容
返回

熟悉小程序开发目录

>

新项目默认目录

/pages--------存放小程序所有界面
    -/index---首页
        /*
            每一个界面都是由以下四个文件组成
            1.index.js-----页面交互(web的js文件)
            2.index.json---页面配置文件
            3.index.wxml---页面结构(web的html文件)
            4.index.wxss---页面样式(web的css文件)
        */*
    -/logs----log信息页
/untils
    -/until.js---官方默认有格式化时间的代码
    /*全局就是对整个程序所有页面作用*/
app.js-----------小程序全局js文件
app.json---------小程序全局配置文件
app.wxss---------小程序全局css文件
project.config.json--项目相关信息文件
sitemap.json-----小程序内搜索配置相关文件

和传统web开发的区别

1.json文件不再是模拟数据时使用,而是作为配置小程序使用

```JavaScript
    {
       <!-- 配置该程序有几个页面 -->
        "pages": [
            "pages/index/index",
            "pages/logs/logs"
        ],
        <!-- 配置程序页面样式等 -->
        "window": {
            "backgroundTextStyle": "light",
            "navigationBarBackgroundColor": "#fff",
            "navigationBarTitleText": "WeChat",
            "navigationBarTextStyle": "black"
        },
        "sitemapLocation": "sitemap.json"
    }
```

语法上和vue的一些使用区别

1.更改data属性时

```javascript
    //vue里更改data属性
    data:{
        name:'test'
    },
    methods:{
        update(){
            this.data='tes2';
        }
    }
    //微信里更改data属性
   data:{
        name:'test'
    },
    // 微信里方法和data并列,不用像vue那样全写在methods对象里
    update(){
       this.setData({
           name:'test3'
       })
    }
```

2.点击事件传值

```javascript
    //vue 绑定一个事件是 v-on:(js原生事件名)click='方法名'
    // 传递参数向普通js一样传递即可
    <div @click='hint("hi")'> </div>

    methods:{
        hint(str){
            console.log(str);//hi
        }
    }

    // 微信通过bindTap绑定点击事件 其他事件查看文档
    <view data-hintstr='hi' bindTap='hint'></view>
    hint(e){
        console.log(e.currentTarget.dataset.hintstr);//hi
    }
```

3.微信里的页面标签 view==div text==p block用wx:for时使用 wxss和js都是和传统web一致

4.小程序官方封装好了ajax的请求,类似axios那样的

5。。。继续摸索中。。。



上一篇
关于js模块化
下一篇
关于js深拷贝
×