小程序 -常用官方小功能记

版权声明：尊重原创！ https://blog.csdn.net/weixin_42675488/article/details/83789673

参考文献：

学习文件
小程序资源包	小程序购物车实战
-	Sublime插件1+插件2
	小程序wxcharts表格wepy实现
	——
阅读步骤：
	1、三元运算符
	2、app.jsop官方配置，与wepy书写格式会有所不同
	3、一些常用的官方api接口

1、三元运算符：

格式： {{ 表达式1 ？ ‘表达式2’ ： ‘表达式3’ }} ，说明：

如果表达式1为 true ，则整个表达式的结果就是表达式2的值，

如果表达式1为 false，则整个表达式的结果就是表达式3的值。

<view class="harvest-box {{ hideShow ? '' : 'hide' }}">
	<view class="shop-box">
	    <view class="harvest-item-hd">
	        <view class="img-box" @tap="navigateProduct">
	            <image></image>
	        </view>
	    </view>
	    <view class="harvest-item-ft">
	        <view class="weui-cell-ft" @tap='showShut'></view>
	    </view>
	</view>
</view>

<script>
    data = {
        hideShow: true,
    }
    methods = {
        showShut() {
            var that = this
            this.hideShow = !this.hideShow
        },
    }
</script>

2、app.jsop

"navigationBarBackgroundColor":"#666666" ---------------------------------------- / 导航栏的背景色
"navigationBarTextStyle":“white” -------------------------------- / 注意：这里仅支持white/black/light
"navigationBarTitleText":“微信demo”-------------------------- / 导航栏标题文字
"bacgroundColor":"#333333" --------------------------------------- /下拉刷新页面的窗口背景色
"backgroundTextStyle":“dark” ------------------------------- / 下拉背景字体，loading图的杨啊是，仅仅支持 dark/light
"enablePullDownRefresh":“false” ---------------------------- / 是否开启下拉刷新
backgroundColorBottom: ‘#fff’ -------------------------------- / 下拉窗口底部颜色 Top / Bottom
navigationStyle:‘custom’ --------------------------------- / 取消顶部导航栏
链接：小程序官方文档

---

3、官方api

<open-data type="userAvatarUrl" class="img-xs"></open-data> /* 获取个人头像 */
<open-data type="userNickName"></open-data>  /* 获取个人名称 */

/* 跳转另一个小程序 */
<navigator class="btn" target="miniProgram" open-type="navigate" 
	app-id="wxb9a8341083cfaa3c" path="" extra-data="" version="release">打开绑定的小程序</navigator>
// redirect 属性会关闭上一个页面 ， reLaunch 关闭所有页面，打开到应用内的某个页面

<button class='btn' open-type="share"></button>  // 分享功能
<button class='btn' open-type="contact"></button>  // 客服功能
<button class='btn' open-type="feedback"></button>  // 打开“意见反馈”页面功能

// 复制文字功能:
<text>优惠码 {{result}}</text>
<view class="m-copy" @tap="setClipboard">复制去使用</view>
js:
data = {
    result: '283HSG2731'
}
methods = {
setClipboard() {
    var that = this
    wx.setClipboardData({
        data: that.data.result,
        success: function(res) {
            console.log(res.data) // data
            that.setData({
              result: res.data
            })
        }
    })
},
}

官方：表单组件

4、利用id传值进行跳转

<view class='img-box border-rd form-box'>
  // data-id 拿到id值
  <button class="btn" @tap="naviskipUrl" data-id="{{product.id}}" ></button>
  <image src='{{product.pics[0]}}' class='img-xs' mode='aspectFill'></image>
</view>

naviskipUrl: function(e) {
  var id = e.currentTarget.dataset.id
  var url = '/pages/index/index?id=' + id;
  id && wx.navigateTo({
    url : url,
  })
}

---