小程序

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

代码如下：

​x
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
      }
    })
})
// 这些为默认设置

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

xxxxxxxxxx
/**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里配置

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

同时在index.wxml里面使用

xxxxxxxxxx
<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为例

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

在index.wxml里面bind

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

3）组件的构建

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

xxxxxxxxxx
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方法和属性赋值

xxxxxxxxxx
<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）传值的问题

• 正向传值三种方式

  • url拼接参数
  • app全局变量
  • 本地存储

• 反向传值：通过数据绑定bind

例子1：正向传值绑定

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

在js文件中goDetailfunction中

xxxxxxxxxx
 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)
      })
    }
  },

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

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

例子2：反向绑定

见页面交互解释2）和3）。

5）网络请求

网络请求是小程序内部提供的:wx.request

xxxxxxxxxx
 requestData: function(){
    // 页面loading
    wx.showLoading({
      title:"加载中..."
    })
    var self = this;
    wx.request({
      url:"https://",
      //成功回调
      success(res){
        console.log(res.data.list);
        // 隐藏loading
        wx.hideLoading();
        // 停止刷新
        wx.stopPullDownRefresh();
        self.setData({
          dataSource:res.data.list,
        })
      },
      // 失败回调
      failure(){
​
      }
    })
  },

常用的下拉刷新和上拉加载更多功能，每个page默认内置，开启需要在json文件中配置"enablePullDownRefresh":true,。

xxxxxxxxxx
/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log('刷新');
    this.requestData();
  },
​
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('加载更多');
    this.requestData();
  },
​

6)常用的component

• 圆角按钮

  不知道具体的高度，可设置border-radius是一个大值，例如9999px。

  xxxxxxxxxx
  .container{
      display: flex;
      background: linear-gradient(to right,#FF5A4B,#FF6E73);
      width: auto;
      align-items: center;
      justify-content: center;
      padding: 10rpx;
      border-radius: 9999px;
  }
  

   

5，总结

• html基础要有，主要是页面布局
• js语法熟悉，页面交互和逻辑
• Demo地址：小程序Demo