小程序篇

发表于 2017-04-25 | 标签: 小程序

微信小程序

注册获取小程序的AppID

注册地址 个人和企业区别（高级api)

一、小程序页面传参的方法

1、链接上 index?edit=1

在index页面获取  

onLoad:function(options){
console.log( options.edit==1)//true
如果有多个要传输的数据可以使用JSON.stringfy和JSON.parse进行字符串化和json化
}

2、子页面向父页面传参

var pages= getCurrentPages();
var currPage = pages[pages.length - 1];
var prevPage = pages[pages.length - 2];
console.log("currPage:"+currPage)
console.log("prevPage:"+prevPage)
 currPage.data.list;//得到上个页面的list数据
 currPage.setData({//设置上个页面的数据selectedCompany，这个可以结合上个页面的onshow事件完成数据的展示
 selectedCompany:"1111"
 })
prevPage.setData({
  selectedCompany:selectedCompany
})

其实可以直接使用prevPage操作上个页面或者获取上个页面的内容，进行参数传递

3、设置data得出数据

data-id/data-hi
Page({
 tapName: function(e) {
      console.log(e.target.dataset.id)
      console.log(e.target.dataset.hi)
 }
})

4、表单提交获取值 ```

js: formSubmit:function(e){ var password = e.detail.value.password; }

#### 二、小程序模板传入data

companyList:[], companyListT:[{ name:’zhangjs’, age:’23’ }] 

#### 三、函数说明
``` python
onShow:每次页面显示都会触发这个事件
onLoad:页面加载事件

四、js

1.设置页面NavigationBarTitle

wx.setNavigationBarTitle({
    title: '填写页面名字'
 })

2.有相同样式的列表可以使用wx:for来循环data中设置的数据

3、学会巧妙利用wx:if exlse来分情况显示不同的文字

当然更可以使用<view class=""></view>来设置不同情况的样式
当然更可以使用<view bindtap=""></view>来设置不同的事件。

4、到达底部刷新

可以用scroll-view bindscrolltolower事件
 <scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="" scroll-top="">
    <view id="green" class="scroll-view-item bc_green"></view>
    <view id="red"  class="scroll-view-item bc_red"></view>
    <view id="yellow" class="scroll-view-item bc_yellow"></view>
    <view id="blue" class="scroll-view-item bc_blue"></view>
  </scroll-view>

5、input巧用

<input type="text" class="weui-search-bar__input" placeholder="搜索" value="" focus="" bindinput="inputTyping" bindconfirm="search" confirm-type="search"/>
bindconfirm点击右下角的完成按钮触发的事件
confirm-type设置右下角文字search（搜索）

6、事件参数e

e.target.value
e.currentTarget

五、样式说明

简单的情况下可以使用wx自带的样式weui-wxss。可以在github上下载使用。
布局思想：flex+rpx+px;<br>
rem与rpx思想类似 1rx=0.5px固可以直接border:1rpx solid #ddd来设置实现多倍屏下面的0.5px宽度的线条。

六、又拍云小程序SDK

https://github.com/upyun/upyun-wxapp-sdk

七、小程序自定义toast

https://github.com/kiinlam/wetoast

八、小程序省市区三级联动

https://github.com/treadpit/wx_selectArea

目录层级不能多于5级，不然不能打开

var pages= getCurrentPages();
页面层级数。   #### 小程序可以开启不检验域名模式进行开发
© 2016-2019 前端-coral 微信，加好友zjs123zjs1234，备注博客
由 jekyll 强力驱动 

#### 三、函数说明
``` python
onShow:每次页面显示都会触发这个事件
onLoad:页面加载事件

四、js

1.设置页面NavigationBarTitle

wx.setNavigationBarTitle({
    title: '填写页面名字'
 })

2.有相同样式的列表可以使用wx:for来循环data中设置的数据

3、学会巧妙利用wx:if exlse来分情况显示不同的文字

当然更可以使用<view class=""></view>来设置不同情况的样式
当然更可以使用<view bindtap=""></view>来设置不同的事件。

4、到达底部刷新

可以用scroll-view bindscrolltolower事件
 <scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="" scroll-top="">
    <view id="green" class="scroll-view-item bc_green"></view>
    <view id="red"  class="scroll-view-item bc_red"></view>
    <view id="yellow" class="scroll-view-item bc_yellow"></view>
    <view id="blue" class="scroll-view-item bc_blue"></view>
  </scroll-view>

5、input巧用

<input type="text" class="weui-search-bar__input" placeholder="搜索" value="" focus="" bindinput="inputTyping" bindconfirm="search" confirm-type="search"/>
bindconfirm点击右下角的完成按钮触发的事件
confirm-type设置右下角文字search（搜索）

6、事件参数e

e.target.value
e.currentTarget

五、样式说明

简单的情况下可以使用wx自带的样式weui-wxss。可以在github上下载使用。
布局思想：flex+rpx+px;<br>
rem与rpx思想类似 1rx=0.5px固可以直接border:1rpx solid #ddd来设置实现多倍屏下面的0.5px宽度的线条。

六、又拍云小程序SDK

https://github.com/upyun/upyun-wxapp-sdk

七、小程序自定义toast

https://github.com/kiinlam/wetoast

八、小程序省市区三级联动

https://github.com/treadpit/wx_selectArea

目录层级不能多于5级，不然不能打开

var pages= getCurrentPages();
页面层级数。   #### 小程序可以开启不检验域名模式进行开发
-->