【微信小程序】原生小程序-新手注意事项

---

原生小程序的新建文件

步骤一：打开app.json全局配置文件可以看到page字段里的内容,直接写，自动新建

 "pages": [
      "pages/index/index",
     ]

原生小程序修改值

this.setData({})

注意，一旦你的数据想要渲染到wxml文件中，展示在页面上，就得通过setData({})

this.data.xxx

如果只是js文件中的调用，就不需要上面那个方法进行运算

1, this.setData({})
2,注意：this.setData里面不能判断条件

一、使用[‘字符串’]形式

this.setData({
['steps[0].text']:“哈哈”
})

二、使用’字符串’形式

this.setData({
'steps[0].text':“哈哈”
})

三、构造变量，重新赋值

这个就是定义新的中间变量，接收修改后的值，然后再把中间变量setData给之前的值

var steps= this.data.ordersteps
steps[0].text= ‘哈哈’

this.setData({
  ordersteps：steps
})

原生小程序修改按钮样式

微信客服按钮去掉边框的方式：

方法1：

button::after {
  border: none;
}

---

方法2：

先给button加一个plain属性

<button class="contact" plain @tap="tocontact" open-type="contact">联系客服</button>

然后找到按钮的样式加上这行代码

 button[plain]{ border:0 }

原生父传子注意事项：

提示：这里填写问题的分析：

//父传
<workbench data="{{work}}" status="{{work.status}}"></workbench>

//子收
  properties: {
    status:{type:String},
    data:{type:Object}
  },
 //打印,直接接收可能收不到，得定时器
  created() {
      setTimeout(() => {
        this.setData({
          detail:this.properties.data
        })
        console.log(this.data.detail)
      }, 100)
    },

---

原生小程序组件的引用

步骤一：.json文件的引用

{
//这个
  "usingComponents": {
    "tabbar":"/components/tabbar/tabbar",
  },
  "navigationStyle":"custom",
  "navigationBarBackgroundColor": "#f43022",
  "disableScroll":true
}

步骤二，页面直接使用

<tabbar></tabbar>

原生小程序使用vant组件的van-picker无遮罩：

发现无背景遮罩，解决方法，采用vant组件的van-popup包裹van-picker：

<van-popup
  show="{{ isShowState }}"//控制弹窗的弹起和关闭
  round
  position="bottom"
  bind:close="onClose"
>
<van-picker show-toolbar="{{true}}" bind:cancel="onCancel" bind:confirm="conFirmstateList" columns="{{ stateList }}" />
</van-popup>

原生小程序自定义顶部

步骤一：文件的.json里面

{
  "usingComponents": {},
  "navigationStyle":"custom"
}

步骤二：.wxml里面,我

<van-nav-bar border="{{false}}" custom-style="background:#f5f7fb">
	//左箭头
    <van-icon name="arrow-left" bindtap="onClickLeft" color="#000" size="20px" slot="left" />
	//自定义的输入框，一般没这个需求
    <view class="popSearchTop" slot="left">
        <van-search left-icon="/xxx/search.png" value="{{ search_val }}" placeholder="请输入" background="#fff !important" shape="round" bind:change="inputSearch" bind:search="onSearch" clearable="{{false}}" placeholder-style="color:rgba(13,16,19,0.6);width:120%">
        </van-search>
    </view>
</van-nav-bar>