微信小程序使用入门踩坑手册

1、先需要注册一个小程序，拿到想要的AppID

2、下载微信开发者工具，新建一个小程序（绑定的文件夹一定要是空文件夹）

3、开发过程中
3.1
使用了npm中的组件，先要在本地安装。
但是安装了之后小程序开发工具不会读到，所以引用资源不要引用这个文件夹的资源。
主要是需要去开发工具里面的 工具-构建npm 点一下，然后才算构建完成。这个构建是基于node-modules这个文件夹构建的。
具体使用的话还要去开发工具右上角详情里面，勾选 “使用 npm 模块” 才算是正式可以使用。

3.2
所有路由都要在app.json文件中添加，小程序路由不像是真正的路由，它每个路由页面都是一个单独的页面，不存在子路由。路由页面每一个重复元素都需要自己提炼书写。如果没在app.json中添加，报错信息如下

redirectTo:fail page "pages/home/home" is not found

3.3
使用icon，在小程序中使用iconfont，缺点在于没法使用多色图标，多色图标中的颜色会消失。ttf转换base64页面
另外文章中有一点没提到，下面这一个文件应该是不用再引用了。可以删掉。

代码

3.4
修改标题栏
想修改整个程序的导航栏，在app.json 文件 修改

 "window": {
    "navigationBarTitleText": "导航栏名称"
  },

想修改单页面的导航栏的，在要修改的页面文件夹中的json文件中填写以下代码即可修改

"navigationBarTitleText": " 导航栏名称"

3.5
rpx其实是微信对于rem的一种应用的规定，或者说一种设计的方案，官方上规定屏幕宽度为20rem，规定屏幕宽为750rpx。所以可以选择iphone6、7进行开发，这两个均是375，具体像素修改的时候设为rpx/2就可。

3.6
template模板简单使用

3.7
小程序默认使用的box-sizing是content-box，如有需要可以手动改成border-box。

3.8
配置底部导航tabBar的时候，只要在app.json里面配置即可，别的地方无需写代码。
同时也有问题，配置了tabBar的页面，只能使用switchTab访问，其他的navigateTo、redirectTo均无法使用

3.9
class等地方想用data属性，可以在{{}}中直接用js语法，是可以使用的。我最后代码如下：
class="home-bar-each {{type == 2 ? 'active' : ''}}"

3.10
小程序中的css不可以 .a > p 不可以.a.b，:first-child这种伪类也不行。

小程序支持的全部选择器

3.11
获取窗口高度

// 获取系统信息
wx.getSystemInfo({
  success: (res) => {
    // 获取可使用窗口宽度
    let clientHeight = res.windowHeight;
    // 获取可使用窗口高度
    let clientWidth = res.windowWidth;
    // 设置高度
    this.setData({height: clientHeight});
  }
});

3.12
组件中的class样式也不可以修改，写了也没用。
解决方法，尽量不改原来的样式，要修改，加class之后对这个class进行样式修改

3.13
小程序原生貌似现在不支持css变量写法，但是可以用组件实现。（暂未尝试）

3.14
我这边用了weui的组件，他们的searchbar组件的ext-class在声明之后，wxss改了也不生效，于是

css不生效.png

我的解决方案是将整个组件拷贝出来，然后直接改组件，加参数。（虽然是有点low，但被逼无奈）

3.15
他这边的bindtap虽然可以绑定在view上，但是实际上它里面每个元素都绑上了，随意点击事件，像我这样要取data-id，不能使用target，而是要去使用currentTarget。

<view data-id="{{item.id}}" bindtap="openDetail">
    <view class="home-list-name">{{item.name}}</view>
    <view wx:if="{{item.status == 1}}" class="home-list-status-ing">进行中</view>
    <view wx:else class="home-list-status-ed">已完成</view>
    <view class="home-list-boss-name">{{item.bossName}}</view>
</view>

3.16
wx:for 以及 wx:if 是可以写在同一行里面，for中传入的data对应的index，item都可以在同一行的if中直接使用。

for与if

3.17
wx:if 可以用在任意元素上。

3.18
setData是一个同步方法，不像React的setState是一个异步方法。

3.19
修改顶部标题分静态和动态修改。
静态修改是在.json文件中配置 "navigationBarTitleText": "首页"
动态修改是在js中调用 wx.setNavigationBarTitle({title: "添加项目记录"});方法

3.20
数据回传，当子页面修改了数据，需要传到父页面时。可以用Pages对象Pages对象里面存的是所有页面，用getCurrentPages方法可以拿到这些页面。然后可以进行修改处理。

var that = this 
var pages = getCurrentPages();
var currPage = pages[pages.length - 1];   //当前页面
var prevPage = pages[pages.length - 2];  //上一个页面

prevPage.setData({
    userName: this.data.contentStr
});

3.21
switchTab方法跳转的时候，页面不会更新，不会调用onLoad方法，如果需要手动更新可以进行如下操作

wx.switchTab({
    url: '/pages/index/index',
    success: function (e) {
        var page = getCurrentPages().pop();
        if (page == undefined || page == null) return;
        page.onLoad();
    }
})

3.22
这边在用textarea的时候发现一个问题，官方好像也不准备解决了。
具体方案：方案
另外我这边解决方案非常简单，去掉Page上设置的height:100%;就好了

textarea悬浮bug

3.23
navigateTo跳转的页面最好加上Unload的生命周期，如果没有，这个组件是没法unload的。
下次再进来这个页面是不会调用onload的。

3.24
获取元素css样式，可以使用如下方法：

let query = wx.createSelectorQuery();
query.select(".project-detail").boundingClientRect((dom)=> {
    console.log(dom.width)//width等
}).exec();

但是dom中的元素属性仅有：

元素属性

3.25
获取scrollTop值，可以从onPageScroll中获取。设置scrollTop也有专门方法，

onPageScroll: function (e) { // 获取滚动条当前位置
    console.log(e.scrollTop)
}

wx.pageScrollTo({
    scrollTop: 100
})

3.26
switchTab，只能在app.json中设置了tabBar才可以使用。
navigateTo，跳转到一个非tabBar页面，有后退按钮，会自动到scrollTop：0，onLoad只会触发一次。
redirectTo，跳转到一个非tabBar页面，不可退回上一个页面。
navigateBack，跳转回一个已经打开过的页面，不会自动scrollTop:0。

3.27
所有的data会默认执行，最好不要在data中加方法。
我在data中写了个JSON.parse(wx.getStorageSync("a"))，然后如果没有这个东西的话，会影响整个程序的运行。

3.28

data: {
    loginAccountId: wx.getStorageSync('accountId'),
}

我在代码中这样使用，这个值在我重新打开小程序依旧不会改变，这样会造成问题，建议在onShow中重写。

4、资料
4.1、 小程序官方demo，组件demo / 小程序demo，git地址
4.2、 微信小程序--上传文件（图片/word等）功能
4.3、小程序api-官方