小程序wepy使用随笔杂记

近期，手工copy了wepy-wechat-demo 的项目，中间遇到了各种问题，现记录下：

1.克隆下来wepy-wechat-demo之后，vscode打开，style部分飚红，把type改成lang就好了

<style type='scss'></style> 
//改成如下
<style lang='scss'></style> 

2.新建项目，按照wepy官网

npm install wepy/cli -g   //全局安装wepy脚手架
npm init standard copy-wechat-demo  //初始化一个标准模板的项目
//接下来就是项目名称、AppId、项目描述、作者、是否用eslint等
cd copy-wechat-demo //切到项目目录
npm install   //安装项目依赖
npm run dev  // 启动编译监听项目

3.接下来用微信开发者工具导入项目就可以看到效果了。

4.在app.wpy中 添加支持promise

import 'wepy-async-function'；
constructor(){ 
  super();
  this.use('promisify');   //支持异步请求
  this.use('requestfix') ;   //修复小程序请求并发问题
}

5.兄弟组件调用方法
比如A和B都是index.page的子组件，A调用B组件的test方法并传参123：

this.$invoke('../B','test',123);

6.关于页面跳转

this.$root.$navigate({url:'index'});  
this.$root.$navigate({url:'chat?id='+id+'&name='+name}); //带参数跳转
参数在chat.page的onLoad生命周期函数中接收就可以了。

7.页面提取公共样式

<style lang='less'>
@import url('../css/base.wxss');
</style>

8.style里面dom的background-image 属性不能是相对路径的图片，只能是线上 的图片或者经过base64的图片，否则就只能用image 来代替。
9.聊天窗口用scroll-view组件包裹的，scroll-view 需要有指定的height。
如果想让其占满除了输入框之外的高度：

//template部分
<scroll-view scroll-y='true' scroll-top="{{scrollTop}}" bindscroll="scroll" 
style="height:{{scroll_height}}rpx" scroll-into-view='{{scrollID}}' scroll-with-animation='true'>
            <block wx:for='{{message}}' wx:key='index' wx:for-index='index' wx:for-item='chatItem'>
                <view class="chatlist {{chatItem.from==='me'? ' me' : ' other'}}" id='roll{{index+1}}'>
                    <image class='icon' src='{{chatItem.icon}}'></image>
                    <view class='msgtext'>{{chatItem.msg}}</view>
                    <view class='clearfix'></view>
                </view>
            </block>
 </scroll-view>
//script部分
 let windowHeight = wx.getSystemInfoSync().windowHeight // 屏幕的高度
 let windowWidth = wx.getSystemInfoSync().windowWidth // 屏幕的宽度
 this.scroll_height = windowHeight * 750 / windowWidth - 100;  //100rpx是输入框的高度
 // 750是屏幕宽度为750rpx，小程序官网是这么定义的：
 // rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
//如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

10.让scroll-view 始终滚动到最新的一条消息（代码接9）

//scroll-into-view ：是指滚动到该元素的id。不能以数字开头。  
this.scrollID = 'roll'+this.message.length;

11.scroll-view 在横向滚动时候，需要再加一层容器包裹；

 <scroll-view class="scroll-view_H" scroll-x style="width: 300rpx;height:200rpx">
    <view class='scroll_wrapper'>   //需要加上一层它，让他的宽度等于子元素宽度的和，看似不起眼，但是被折腾了好久，哈哈哈
        <view id="green" class="scroll-view-item_H bc_green"></view>
        <view id="red"  class="scroll-view-item_H bc_red"></view>
        <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
        <view id="blue" class="scroll-view-item_H bc_blue"></view>
    </view>
  </scroll-view>

12.数据传个对象的话，对象上定义的方法传不过去。

itemArr :[{ icon: '../images/setting.png',
            title: '清除本地聊天记录',
            action() { this.clearHistory(); }
        }]
//在循环的列表上加上@tap='click(item)';
//传递过来的item上，没有action这个函数了；
//在子组件里面这么调：
this.itemArr[i].action.call(this.$parent);

13.自定义的函数写在外面，methods里面只能写tap、focus、blur、input 等这些触发的方法；
14.还有一些js的用法，一并写到这吧：

Math.random()*5 >> 0  // >>是让位操作，让位0，就类似于Math.floor(Math.random()*5);
charCodeAt()   //返回指定位置的字符的Unicode编码；
charAt()  //返回指定位置的字符；
fromCharCode()  //接收一个指定的Unicode值，然后返回一个字符串，可以接收多个参数；
// String.fromCharCode(65)   返回字母 A
//箭头函数：
() => a - b; 与 () => {return a -b}; 
//这两种写法效果是一样的；

暂时就想起这么多，还有个问题就是wepy里面的template里面的所有标签都有自己手动输入，例如输入view按tab键根本生成不了view标签，查了好久都没有找到对的插件，头大中。。。