微信小程序一

• 版本：v2
• 申请卫星小程序账号（1~2）
• 下载微信小程序开发者工具（3~6）
• 写一个小demo（7）
• 实际开发中的一些细节汇总（第二节）

 一、申请账号/下载开发工具

1.微信公众平台：https://mp.weixin.qq.com/

2.申请账号：申请账号、添加微信小程序、获取小程序的AppID。

3.下载安装开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

4.创建项目：注意是否使用云开发。

5.项目初始文件解析：

//根目录
    pages    //页面根路径
        index    //index页面路径
            index.js    //index页面逻辑文件
            index.json    //index页面配置
            index.wxml    //index页面结构文件
            index.wxss    //index页面样式文件
        logs    //logs页面路径
            ...
    utils    //
        util.js    //
    app.js    //入口文件
    app.json    //全局的配置
    app.wxss    //全局的样式
    project.config.json    //项目配置文件
    sitemap.json    //配置微信内索引

6.使用vs code开发微信小程序的相关插件：

6.1 minapp：支持微信小程序标签、属性的智能补全，并且提示中包含文档内容（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）。

6.2 wechat-snippet：这个插件主要的功能就是代码辅助，代码片段自动完成（函数的智能补全），可以作为上个插件的补充。

6.3 后续还用到其他插件再来补充。

7.一个最简单的小程序demo：

test    //根目录
    image    //图片根目录
        avatar.jpg
    pages    //页面根目录
        index    //index页面
            index.js
            index.json
            index.wxml
            index.wxss
    app.js
    app.json
    app.wxss
    project.config.json
    sitemap.json

project.config.json和sitemap.json两个配置文件保持不变，app.js、app.wxss可以清空。关键是需要注意index.js中执行Page({})方法，这个方法将一个小程序页面的几个文件解析生成一个渲染页面，如果不调用不会渲染页面。然后注意index.json文件可以不配置任何内容，但至少需要写一对大括号。

{
  "pages":[
    "pages/index/index"
  ],
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

//index.wxml
<view class="contatiner">
  <image class="avatar" src="/image/avatar.jpg"/>
  <text class="name">他乡踏雪</text>
  <text class="welcome">欢迎来到我的杂志</text>
</view>

//index.wxss
page{
    background-color: #00b26a;
}

.contatiner{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100px;
    border-radius: 50%;
}

.avatar {
    width: 80px;
    height: 80px;
}

.name{
    color: #666;
    font-size: 14px;
    margin-top: 30px;
}

.welcome {
    border: 1px solid #000;
    padding: 10px 20px;
    margin-top: 100px;
}

//index.json
{
  "navigationBarBackgroundColor":"#00b26a"
}

//index.js
Page({
    
})

 8.开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/

 二、开发中的一些细节汇总

wxss开发文档：指南>小程序框架>视图层>wxss：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

wxml开发文档：指南>小程序框架>视图层>wxml：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/

小程序事件系统：指南>小程序框架>视图层>事件系统：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

1.文本可以写在text标签内，也可以不用text标签，但需要注意如果不写在text标签内是不能被长按复制的，因为text标签上有属性user-select来控制文本是否可选（2.12.1版本之前使用selectable属性），text标签还可以控制空格与 的使用（让 生效的属性与值decode="true"），详细请查看文档：https://developers.weixin.qq.com/miniprogram/dev/component/text.html

2.为了自适应各个机型的屏幕，wxss自定义了rpx长度单位，可以根据屏幕宽度自适应，这个自适应单位是规定了屏幕宽度为750rpx，高度为1334rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。一般开发时就可以使用iPhone6为标准宽度方便计算，详细查看文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

 

3.text文本就根据机型屏幕变化而自适应变化。

4.view标签相对html的div有一些新的特性，比如有点击态的样式hover-class，以及按住多久触发点击态，松开后点击态消失，这是为了区分手势划过和点击两种状态，详细参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/view.html

<view class="ceshi-contatiner" hover-class="ceshi-hov" hover-start-time="50" hover-stay-time="400">
  <view class="box" hover-class="box-hov" hover-stop-propagation="true" hover-start-time="50" hover-stay-time="400"></view>
</view>

//wxss
.ceshi-contatiner{
    width: 200rpx;
    height: 200rpx;
    background-color: red;
}
.ceshi-hov{
    background-color: blue;
}
.box{
    width: 100rpx;
    height: 100rpx;
    background-color: yellow;
}
.box-hov{
    background-color: green;
}

5.指定image的高度根据宽度自适应：mode="width"；

6.事件绑定：（wxs中的事件绑定与js中的事件绑定有一点点区别，详细请查看文档）

//tag attribute
bindtap="xxx"    //bindtap:会触发事件冒泡
catchtap="xxx"    //catchtap:会中断事件冒泡
mut-bind：tap="xxx"    //mut-bind:互斥事件，当mut-bind事件触发，其他节点的mut-bind绑定不会触发，其他bind和catch会触发，且并不影响bind和catch的绑定效果。
capture-bind:tap="xxx"    //capture-bind:会触发事件捕获
capture-catch:tap="xxx"    //capture-catch:会中断捕获阶段和取消冒泡阶段

//js
Page({
    xxx: function(event) {
      console.log("事件测试：");
      console.log(event);
    }
})

7.微信小程序路由相关参考这篇博客：微信小程序：路由

8.遇到了轮播如组件postion:absolute定位无法覆盖的问题，这其实很简单是因为z-index规则导致，越靠近文档前部分的元素定位永远在后面的上面或同级，即便后面的元素设置再大的z-index值实际上会被计算成它前面一个同级的值，这时候会出现这两个定位元素出现在同一层，如果如果两个元素宽高的和超出会出现导航条。（这个规则暂时只在小程序中验证过，对于移动web和pc web是否相同还待验证）

9.css3背景色透明：标准rgba方法可以这样配置（rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如background-color:rgba(255,255,255,0.8)），IE使用filter属性这样配置（filter:Alpha(opacity=x)，x 的取值从 0 到 100，如filter:Alpha(opacity=80)）。整个元素内容透明采用：opacity。

10.微信icon图标使用方法：https://blog.csdn.net/nongweiyilady/article/details/74244362，iconfont图标库链接：https://www.iconfont.cn/，icon格式转换：https://transfonter.org/。

11.遇到一个有关于文本内容对齐的问题，相关css属性vertical-align。但问题的本质是display的行级元素inline和行级块元素inline-block被浮动或者flex到同意行时，并且在上外边距的情况下产生的content错位，这个问题是否在pc端出现还待研究。

12.两个block元素浮动，后面一个元素带有margin-top，导致前面一个元素也被动出现了margin-top。（这个问题时出现在调试上一个问题时产生的）

13.可滚动视区scroll-view在内部子项中的点击跳转页面（wx.navigateTo）时，如果使用bind:tap会触发页两次跳转，但不时子项上的tap事件回调被调用两次，而是一次，仅仅是页面重复跳出两次，这有点百思不解，但可以确定的是bind的事件冒泡导致，但奇怪的是冒泡触发的不是其他层级元素的同意事件其他回调吗？为什么会重复跳转子项回调跳转的页面呢？但如过从行为结果出发来思考，同一个页面跳出两次那就是触发这个跳转行为事件回调函数被调用了两次。但不管他如何，采用catch;top调用回调就可以修复这种问题。

 14.button标签宽度自动填满整行，但无法修改的情况。这个情况修改display的盒模型都无法改变宽度，后来在前辈的博客中发现使用行内样式可以修改成功，也就是在wxss中无法修改button的宽度。

 15.小程序父子组件传参：

//父组件引入子组件--循环渲染--将每个循环的数据项item通过cardItem传入子组件
<card wx:for="{{articleList}}" cardItem="{{item}}" wx:key="id"/>

//子组件通过properties接收父组件传过来的数据，type校对数据类型，value设置默认参数
properties: {
      cardItem:{
          type:Object,
          value:{}
      }
  }

16.小程序插槽slod的使用（与vue基本一致）：

//1
//父组件引用子组件
<card wx:for="{{articleList}}" cardItem="{{item}}" wx:key="id">
      <view>
        <text class="slotText">{{item.articleType}}</text>
      </view>
</card>

//子组件引入插槽内容
<view>
    ....
    <slot></slot>
</view>

//2
//父组件向子组件传入多个插件
<父组件>
    <view slot="slot1"></view>
    <view slot="slot1"></view>
</父组件>

//子组件插槽引入多个插槽内容
<view>
    <slot name="slot1"></slot>
    ...
    <slot name="slot2">
</view>

17.子组件上调用父组件的方法：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html

18.通过路由传递数据：

<view class="pre-article" bind:tap="onTap" data-articleId="{{cardItem.id}}">

//js
onTap:function(e){
        let id = e.currentTarget.dataset.articleid;
        wx.navigateTo({
            url:"/pages/articleDetail/articleDetail?id=" + id
        })
    }

//在目标页面的onLoad函数中获取路由传递过来的数据
  onLoad: function (options) {
    console.log(options.id);
  },