众所周知小程序出来很久了，很多公司都在做，公司也尝试在做(抽奖小程序)，看了一些官方文档，尝试写了几个简单的页面，总体觉得偏重前端里面的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.开发完成保存后自动编译刷新展示；
自己只是照葫芦画瓢，瞎搞了几个简单的页面，大家可以参考微信小程序官方文档很详细；
---谢谢---
相关推荐
微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码...
《微信小程序开发图解案例教程》教学教案—01认识微信小程序.pdf《微信小程序开发图解案例教程》教学教案—01认识微信小程序.pdf《微信小程序开发图解案例教程》教学教案—01认识微信小程序.pdf《微信小程序开发图解...
微信小程序开发入门教程&深入浅出，从理论到实践 微信小程序开发入门教程&深入浅出，从理论到实践 微信小程序开发入门教程&深入浅出，从理论到实践 微信小程序开发入门教程&深入浅出，从理论到实践 微信小程序开发...
2020微信小程序开发入门期末真题期末复习题.docx2020微信小程序开发入门期末真题期末复习题.docx2020微信小程序开发入门期末真题期末复习题.docx2020微信小程序开发入门期末真题期末复习题.docx2020微信小程序开发...
### 微信小程序开发知识点详解 #### 一、微信小程序账号注册与管理 - **注册账号**： - 访问微信官方的小程序管理后台（https://mp.weixin.qq.com/）。 - 选择注册类型为“小程序”，并填写相关信息（如邮箱、...
项目实战中提供的"点餐demo"可能是已经完成部分功能的源代码，学习者可以通过阅读和修改这些代码，加深对微信小程序开发的理解。同时，也可以参考这个示例来构建自己的点餐系统。 六、小程序开发注意事项 1. 规范...
微信小程序点餐系统微信小程序开发实战项目源码+后台+数据库（毕业设计）微信小程序点餐系统微信小程序开发实战项目源码+后台+数据库（毕业设计）微信小程序点餐系统微信小程序开发实战项目源码+后台+数据库（毕业...
在这个“微信小程序开发项目教程（慕课版）-源码.zip”压缩包中，你将获得一个完整的微信小程序开发项目的源代码，这对于学习和理解小程序开发流程极其有帮助。 首先，微信小程序开发基于一套名为WXML（WeChat ...
总结来说，微信小程序开发涉及的主要知识点包括：微信小程序的注册与配置、开发者工具的使用、项目创建、页面结构与逻辑、数据绑定、状态管理、API 使用、网络请求、调试与预览、以及发布流程。掌握这些知识，你就能...
沈顺天的"微信小程序开发项目实战"通过实践项目，让开发者在实际操作中掌握上述知识点，从而具备独立开发微信小程序的能力。通过本书的源代码，你可以看到完整的项目结构，学习作者的编码风格和问题解决策略，进一步...
本教程“微信小程序开发项目教程（慕课版）”将带你深入学习如何利用微信小程序开发框架进行实际项目的构建。 在微信小程序的开发过程中，你需要掌握以下几个核心知识点： 1. **基础概念**：了解微信小程序的基本...
【Python 开发者的微信小程序开发实践】 在当前的互联网应用领域，微信小程序因其轻量级、便捷的特性，已经成为开发者和用户关注的焦点。对于熟悉Python的开发者来说，虽然微信小程序主要采用JavaScript作为开发...
基于微信小程序开发的仿微信demo(源代码+截图)基于微信小程序开发的仿微信demo(源代码+截图)基于微信小程序开发的仿微信demo(源代码+截图)基于微信小程序开发的仿微信demo(源代码+截图)基于微信小程序开发的仿微信...
1. 微信小程序开发环境搭建：首先，你需要安装微信开发者工具，这是一个集成的开发环境，提供了编写、预览和调试小程序的功能。下载并安装后，可以创建新的小程序项目，并设置项目的基础信息，如AppID、项目名称等。...
在这个“微信小程序开发案例、微信小程序开发源码”的压缩包中，包含了100多个不同的小程序源码示例，这些都是学习微信小程序开发的宝贵资源。 首先，学习微信小程序，你需要了解它的基本架构。微信小程序基于...
本《微信小程序开发手册（完整版）.CHM》是专为初学者和进阶开发者设计的指导性资料，涵盖了从入门到精通的全过程。 该手册首先会介绍微信小程序的开发环境搭建，包括安装微信开发者工具，设置项目，理解小程序的...
在IT行业中，微信小程序开发是一项重要的技术领域，它允许开发者构建轻量级的应用程序，无需用户下载安装，直接在微信平台上运行。PNG图标是UI设计和前端开发中的关键元素，用于提供清晰、高质的视觉指示。对于"微信...
微信小程序是一种轻量级的应用开发平台，主要用于在微信内运行，提供给用户便捷的交互体验。...通过完成这样的项目，开发者不仅可以深化对微信小程序开发的理解，还能锻炼综合应用多种技术解决问题的能力。
微信小程序开发的预约小程序项目源码.zip微信小程序开发的预约小程序项目源码.zip微信小程序开发的预约小程序项目源码.zip微信小程序开发的预约小程序项目源码.zip微信小程序开发的预约小程序项目源码.zip微信小程序...