初试微信小程序需要注意的地方

最近微信小程序刚出来，挺火的，自己也准备尝试一下。文档什么的官方都已经提供而且很全面了，所以不准备介绍小程序呢的用法。

来总结一下自己在尝试微信小程序时遇到的一些需要注意的地方吧。

---

1

首先，小程序中的样式表（wxss）是不支持sass等一些预编译语言的，所以样式不能使用嵌套格式来写。

还有就是如果看了wxml渲染出来的dom结构就知道，在html中一些常用的标签如：<a>``<p>``<div>等等，在渲染后其实在前面都加了wx-的前缀，我经过试验其实在wxss在样式中还是可以使用标签选择器的，但是在小程序中没有默认的块级元素，所以如果使用<div>等标签还需要申明display: block。所以可以使用wxml中定义的<view>标签，直接就是一个块元素。

所以在wxss中最好还是用class类选择器而不是标签选择器去写样式。

也不会支持一些后代选择器。目前支持的只有这些：

选择器	样例	样例描述
.class	.intro	选择所有拥有 class=”intro” 的组件
#id	#firstname	选择拥有 id=”firstname” 的组件
element	view	选择所有 view 组件
element, element	view checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
::after	view::after	在 view 组件后边插入内容
::before	view::before	在 view 组件前边插入内容

---

2

如果列表渲染和模板引用一起使用时，在父模板中使用wx:for来循环渲染，然后把在子模板中用到的数据通过data这个属性传入到子模板中。

//子模板
<template name="list-component">
    <view >{{text}}</view>
</template>


//父模板
<import src="../../component/list/list.wxml"></import>
<template wx:for="{{text}}" is="list-component" data="{{text: item}}"/>

---

3

wxss规定的rem单位和flexible的rem单位是由区别的：flexible规定把屏幕的宽度分成了10rem，但是wxss是把屏幕宽度分成了20rem。如果是原来web项目迁移的话需要注意一下。文档地址

---

4

如何发起http请求？

wx.request({
      url: 'http://news-at.zhihu.com/api/4/news/latest',
      header: {
        'Content-Type': 'application/json'
      },
      success: function(res) {
        _this.setData({
          date: res.data.date,
          allStories: _this.data.allStories.concat(res.data),
          loading: true
        })
        console.log('打印结果'+_this.data.allStories)
        console.log('返回结果'+res)
      }
    })

小程序中有一个对象wx.request 文档地址

当返回数据之后用小程序中的Page上的setData属性赋值到data当中。文档地址

---

5

在编写小程序的过程中记得不要忘记在app.json中注册你所需要的页面。因为有很多不知原因的问题可以是你这里的疏忽所导致的。当你没有注册页面的时候html会正常运行，但是js的逻辑却失效了。

看到下面的警告的时候你就应该注意是这个问题了：

Page[page/page-detail/page-detail] not found. May be caused by: 1. Forgot to add page route in app.json.

（未完）