微信小程序体验

前言

最近公司要调研一下微信小程序，说是做技术积累。

可我是一个iOS开发者，硬着头皮来吧，整理一下两周的调研结果

1，初始配置

• 测试程序一般申请测试号即可，就是一个wxAppId。
• 然后基础的架构开发工具会自动搭建完成。

2，项目架构说明

一个Project小程序架构包含如下：

• peoject.config.json：配置文件，基本可以无视
• 然后就是类似html的三大块：js、json、wxml、wxss
• js : 脚本文件
• json：页面配置文件
• wxml：页面布局文件
• wxss：页面样式文件

3，app模块

• 从架构来看，app.js类似于iOS的AppDelegate文件，里面有基本的Onlaunch函数等同于iOS的didFinishLaunchingWithOptions方法。

• 在app.json文件自动注册页面路径、设置window样式、以及配置tabBar等路由页面

• 在app.wxss配置全局的styles，如果你用weui框架，可以导入style/weui.wxss

代码如下：

App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        console.log("login success")
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
})
// 这些为默认设置

{
  "pages": [
  // 默认会自动添加
  ],
  "window": {
    "backgroundTextStyle": "light",
  },
  "tabBar": {
    "color": "#6e6d6b",
    "selectedColor": "#FF5A4B",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "",
        "selectedIconPath": "",
        "text": ""
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

/**app.wxss**/
@import 'style/weui.wxss';

page{
    background-color: #EDEDED;
    font-size: 16px;
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
}

4，页面模块

说起页面首先要说到框架，我用的是weui，当然也可以用别的，只不过weui风格和iOS更加贴近而已，

weui已经封装好的组件cell、cells、Actionsheet等，不用这些的话也可以用weui-wxss写

1）基础UI页面构建

使用组件在index.json里配置

{
  "usingComponents": {
    "billView":"../components/mine_bill",
    "cardType":"../components/cardType",
    "colorBtn":"../components/colorBtn",
    "mineLimit":"../components/limit_info",
    "cardView":"../components/card/card"
  },
  "navigationBarTitleText":"标题"
}

同时在index.wxml里面使用

<view class="page">
  <!-- 头部视图 -->
  <view class="page_hd">
    <cardView></cardView>
  </view>

   <view class="page_bd page_tqhk">
       <view style="font-size:15px; font-weight:600"> 下月待还(元):1252.0</view>
       <colorBtn title = "提前还款" bindtap="goToMineBill"></colorBtn>
    </view>

  <view class="page_bd">
    <!-- 我的账单 -->
    <scroll-view class="weui-scrollview mine_order"  scroll-x="{{true}}"scroll-with-animation="{{true}}" >
        <billView class="item" 
                  title="我的账单" 
                  color="#EFFAFF" 
                  subTitle="还款日" 
                  bind:btnAction="gotoSee" 
                  bind:billAction="goToMineBill"/>
    </scroll-view>

    <!-- 我的额度 -->
    
    <view class="mine_limit">
      <view class="mine_limit_title" style="font-size:16rpx:font-weight:700">我的额度       </view>
      <mineLimit></mineLimit>
    </view>
    
    <!-- 立即绑卡 -->
    <view class="mine_limit">
      <view style="font-size:16rpx:font-weight:700">立即绑卡</view>
      <view class="bindcard_content">
        <cardType class="card_type" title="微信"></cardType>
        <cardType class="card_type" title="支付宝"></cardType>
        <cardType class="card_type" title="手机钱包"></cardType>
      </view>
    </view>
  </view>
</view>

index.wxss里面就不说了，和其他的css合适没有区别

2）页面交互

以index.js为例

 gotoSee:function(){
    wx.showToast({
      title: '去看看',
      icon: 'success',
      duration: 3000
  })
  },
  goToMineBill:function(){
    wx.navigateTo({
      url:"../repayment/repayment"
    })
  },

在index.wxml里面bind

<billView class="item" 
                  title="设置分期" 
                  color="#FFF8EE" 
                  btnTitle="去设置" 
                  subTitle="不分期" 
                  bind:btnAction="gotoSee" 
                  bindtap="goToMineBill"></billView>

3）组件的构建

组件的构建中，wxml文件是基本相同的，js文件有部分差异

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title:String,
    subTitle:String,
    btnTitle:String,
    showBill:{
      type:Boolean,
      value: true
    },
    color:String
  },
  /**
   * 组件的初始数据
   */
  data: {
  },
  /**
   * 组件的方法列表
   */
  methods: {
    _btnAction(){
      this.triggerEvent("btnAction");
    },
    _billAction(){
      this.triggerEvent("billAction");
    }
  }
})

在wxml中bind方法和属性赋值

<view class="container" style="background:{{color}}">
    <view style="font-size:13px; font-weight:500;margin-top:8rpx">{{title}}</view>
    <block wx:if="{{showBill}}" >
         <view style="font-size:10px; color:#999999;margin:8rpx 0rpx" catchtap='_billAction'>{{subTitle}}</view>
    </block>
    <view class="btn" catchtap='_btnAction'>{{btnTitle?btnTitle:"去看看"}}>></view>
</view>

其中，<block>无任何意义，只是表示一个块结构。

4）传值的问题

第一步：首先在wxml中的bind中赋值data-property，例如bind:tap="goToDetail" data-obj="{{item}}"

在js文件中goDetailfunction中

 goToDetail:function(e){
    if (e.currentTarget.dataset.obj) {
      let a = e.currentTarget.dataset.obj;
      let b = {"name":a.title,"time":a.created_name,"content":a.content};
      wx.navigateTo({
        url:"../home/detail?obj=" + JSON.stringify(b)
      })
    }
  },

第二步：第二个页面收取传值为

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if (options.obj) {
      this.setData({
        obj:JSON.parse(options.obj)
      })
    }
  },

或者

利用localStorage对数据进行传递，这个不多说。

5，总结

• html基础要有，不然页面都难布局
• js语法熟悉，页面交互和逻辑都需要