前言
最近公司要调研一下微信小程序，说是做技术积累。
可我是一个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语法熟悉，页面交互和逻辑都需要
