微信小程序开发

众所周知小程序出来很久了，很多公司都在做，公司也尝试在做(抽奖小程序)，看了一些官方文档，尝试写了几个简单的页面，总体觉得偏重前端里面的js完全没问题页面的布局css等不是我的长处；

下面就简单的聊一下开发流程和步骤，当然微信的官方文档是最详细的

1.下载“微信web开发者工具” 软件，当然还要准备appid和AppSecret

 注意这个扫码登陆，是有时效性的；选择小程序项目；

2.项目的目录结构如下：

 项目的根目录的app.json里的对象“pages”，第一个对象是默认小程序打开的页面，如果你开发哪个页面可以吧当前页面放在首位(后面完成后再调换)，代码如下：建议参考开发文档

{

"pages": [

"pages/user-center/user-center", //个人中心页

"pages/index/index", //首页

"pages/win/win",

"pages/check-login/check-login",

"pages/publish/publish",

"pages/create-img/create-img",

"pages/all-person/all-person",

"pages/award-detail/award-detail",

"pages/my-lottery/my-lottery",

"pages/cutInside/cutInside",

"pages/contact/contact",

"pages/address/address",

"pages/myaddress/myaddress",

"pages/myaddressList/myaddressList",

"pages/add/add",

"pages/add2/add2",

"pages/canvaspublic/canvaspublic"

],

"window": {

"backgroundTextStyle": "light",

"navigationBarBackgroundColor": "#fff",//页头背景色

"navigationBarTitleText": "XX抽奖", //页头标题

"navigationBarTextStyle": "black"

},

"tabBar": {

"color": "#7c7c7c",

"selectedColor": "#fbd73b",

"background": "#ffffff",

"borderStyle": "white",

"list": [ //页尾部：首页/发布/我的

{

"pagePath": "pages/index/index",

"text": "首页",

"iconPath": "/images/home1.png",

"selectedIconPath": "/images/home2.png"

},

{

"pagePath": "pages/publish/publish",

"text": "发布",

"iconPath": "/images/publish1.png",

"selectedIconPath": "/images/publish2.png"

},

{

"pagePath": "pages/user-center/user-center",

"text": "我的",

"iconPath": "/images/my1.png",

"selectedIconPath": "/images/my2.png"

}

]

}

}

4.一般开发的模块放在pages文件夹下：4个文件：js取值复制，json文件标题等简单数据一般为空，wxml页面渲染，wxss样式文件

 4.1 页面渲染 user-centerwxml

<!--用户中心页面 -->

<view class='user-center'>

<view class='item msg'>

<view class='user-info'>

<image src='{{avatar}}'></image>

<text>{{nickname}}</text>

</view>

<navigator class='to-addr' url='/pages/myaddress/myaddress'>收货地址</navigator>

<view class='lottery-list'>

<navigator class='lottery-item' url='/pages/index/index' open-type='switchTab'>

<view class='num'>{{allListNum||0}}</view>

<view class='text'>全部抽奖</view>

</navigator>

<navigator class='lottery-item' url="/pages/my-lottery/my-lottery?">

<view class='num'>{{userMsg.join_num||0}}</view>

<view class='text'>参与抽奖</view>

</navigator>

<view class='lottery-item'>

<view class='num'>{{userMsg.win_num||0}}</view>

<view class='text'>中奖记录</view>

</view>

</view>

</view>

<view class='item contact other-item' bindtap='toContact'>

<view class='left-item'>

<image class='icon' src='/images/contact-icon.png' mode='widthFix'></image>

<text>联系我们</text>

</view>

<view class='right-item'>

<image src='/images/right-arrow.png' class='icon' mode='widthFix'></image>

</view>

</view>

</view>

4.2 样式文件 user-center.wxss

.user-center{

overflow: hidden;

}

.user-center >.item{

margin-top:12rpx;

background: #fff;

position: relative;

width:100%;

font-size:28rpx;

}

.user-center .msg{

padding:52rpx 0;

 

color:#1f1f1f;

}

.user-center .msg .user-info{

width:100%;

display: flex;

justify-content: center;

flex-wrap:wrap;

}

.user-center .msg .user-info >image{

width:108rpx;

height:108rpx;

border-radius: 50%;

display: block;

}

.user-center .msg .user-info >text{

width:100%;

text-align: center;

margin-top:28rpx;

}

.user-center .msg .lottery-list{

width:100%;

display: flex;

justify-content: center;

margin-top:30rpx;

}

.user-center .msg .lottery-list .lottery-item{

margin:0 54rpx;

width:136rpx;

}

.user-center .msg .lottery-list .lottery-item .num{

width:100%;

text-align: center;

font-size:38rpx;

color:#5e5e5e;

line-height: 90rpx;

}

.user-center .msg .lottery-list .lottery-item .text{

text-align: center;

}

.user-center .msg .to-addr{

padding:0 20rpx;

line-height: 46rpx;

border-radius:23rpx;

border:1px solid #bfbfbf;

color:#4d4d4d;

font-size:24rpx;

position: absolute;

top:36rpx;

right:21rpx;

}

.user-center .other-item{

width:100%;

padding:0 20rpx;

box-sizing:border-box;

display: flex;

justify-content: space-between;

align-items: center;

height:80rpx;

}

.user-center .other-item .left-item{

display: flex;

align-items:center;

}

.user-center .other-item .left-item .icon{

width:32rpx;

margin-right:26rpx;

display: block;

}

.user-center .other-item .right-item .icon{

width:14rpx;

}

4.3 json文件user-center.json  空对象

{}

4.4 js文件 user-center.js

// pages/user-center/user-center.js

const util=require('../../utils/util.js');

const appData=getApp().data;

Page({

/**

* 页面的初始数据

*/

data: {

userMsg:{},

allListNum:0

},

// 跳转到联系我们页面

toContact(){

wx.navigateTo({

url:'/pages/contact/contact'

})

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

this.getUserInfo();

this.getUserMsg();

this.getLotteryList();

},

// 获取全部抽奖的个数（首页全部抽奖的个数）

getLotteryList(){

let that=this;

let data=[

['user_cid',appData.cid]

];

let method='getActives';

let param=util.getLotteryRequest(data,method);

wx.request({

url:appData.dataUrl,

method:'post',

header:appData.header,

data:param,

success(res){

if(res.data.code==200&&res.data.data[0]){

let list = res.data.data[0].getActives;

that.setData({

allListNum:list.length

})

}

}

})

},

// 获取头像昵称等信息

getUserInfo(){

let userInfo=wx.getStorageSync('userInfo');

this.setData({

avatar:userInfo.avatarUrl,

nickname:userInfo.nickName

})

},

// 获取个人信息（中奖数等）

getUserMsg(){

let that=this;

wx.showLoading({

title: '个人信息加载中...'

})

let unionId=appData.userUnionId;

let cid=appData.cid;

let data=[

['user_unionid', unionId],

['user_cid',cid]

];

let method ="getMyInfo";

let params = util.getLotteryRequest(data,method);

wx.request({

url:appData.dataUrl,

data:params,

header:appData.header,

method:'post',

success(res){

console.log(res);

wx.hideLoading();

if(res.data.code==200){

that.setData({

userMsg: res.data.data[0] ? res.data.data[0].getMyInfo[0]:{}

})

}else{

wx.showToast({

title:'个人信息加载失败',

icon:'none'

})

}

}

})

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

 

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

 

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

 

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

 

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

 

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

 

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

 

}

})

6. 可以远程手机扫码调试：

 

6.开发完成保存后自动编译刷新展示；

自己只是照葫芦画瓢，瞎搞了几个简单的页面，大家可以参考微信小程序官方文档很详细；

---谢谢---