熟悉小程序开发目录

>

新项目默认目录

/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文件不再是模拟数据时使用,而是作为配置小程序使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
   <!-- 配置该程序有几个页面 -->
    "pages": [
        "pages/index/index",
        "pages/logs/logs"
    ],
    <!-- 配置程序页面样式等 -->
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
    },
    "sitemapLocation": "sitemap.json"
}

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

1.更改data属性时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 //vue里更改data属性
 data:{
     name:'test'
 },
 methods:{
     update(){
         this.data='tes2';
     }
 }
 //微信里更改data属性
data:{
     name:'test'
 },
 // 微信里方法和data并列，不用像vue那样全写在methods对象里
 update(){
    this.setData({
        name:'test3'
    })
 }

2.点击事件传值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//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。。。继续摸索中。。。

技术笔记
踩坑 小程序

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！