志在指尖
用双手敲打未来

小程序开发文档(微信小程序后端怎么搭建)

小程序开发文档

一基本介绍
微信专门为小程序开发了一个ide叫做微信开发者工具
最新一版的微信开发者工具,把微信公众号的调试开发工作也集成了进去,可以更换开发模式。
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
选择无appid,即可在没有appid情况下进行开发,但是无法预览;
二基本架构和配置文件
1.小程序架构
小程序主要由两个部分构成,主体部分(app)和各个页面(page)。
类似于许多框架,主体部分主要用于核心的配置,各个页面主要用于不同业务场景。
app,就是小程序的框架。支撑pages,逻辑层的调用,对数据,wxss,wxml的解析;
page,主要是业务层,用于实现界面化操作功能,是程序员使用频率最高的部分。
1.1,主体部分主要由3个文件构成
三个app文件分别是app.js,app.json,app.wxss。
app.js文件是脚本文件处理一些公共的或者全局的逻辑。比如在这里定义全局变量处理登录逻辑指定首页等。
app.json文件是小程序的整体配置文件。我们必须要在这个文件中配置小程序是由哪些页面组成的,我们还可以在这个文件中配置整个小程序的统一的窗口背景色,导航条样式,默认标题。但是必须注意该文件不可添加任何注释。
app.wxss文件是整个小程序的公共样式表。我们可以在小程序子页面组件的class属性上直接使用app.wxss中声明的样式规则。也就是说在这个文件里定义的样式在其他任何的子页面中都可以使用。这个也是为了代码的简洁和整体风格的统一。
1.2,页面由4个文件构成
小程序的所有显示的页面都必须以子文件夹的形式存放在pages文件夹里面,包括首页。项目展示多少个页面,在pages文件夹下就要新建多少个子文件夹。每个页面的子文件夹,必须包括这四个文件:*.js,*.wxml,*.wxss和*.json(*表示文件名)。这四个文件的文件名必须和子文件夹的名字一样。
*.js文件是当前页面脚本文件,也是业务逻辑的处理文件,当前页面的所有和后端服务器接口的交互,请求数据的逻辑都在这个文件完成,是核心文件,必须创建。
*.wxml文件是搭建当前页面元素的文件。负责搭建当前页面的结构和布局,相当于网页开发中的*.html文件,这个文件中存放一些类似于divspanforminputsectiond等布局代码,必须创建。
*.wxss文件是当前页面的样式文件。负责调整当前页面的样式,元素之间的间距,字体的大小,字体颜色,背景图等,相当于网页开发中的css文件,需要时创建。
*.json文件是当前页面的配置文件。配置当前页面的窗口背景色,导航条样式,默认标题等。
1)app.js:小程序逻辑,初始化APP
2)app.json:小程序配置,比如导航、窗口、页面http请求跳转等
3)app.wxss:公共样式配置
主体配置完成之后,就是对应的业务开发了,也就是开发者最常操作的页面。小程序页面设计基本上也是遵循MVC结构进行构建。
1)js:页面逻辑,相当于控制层(C);也包括部分的数据(M)
2)wxml:页面结构展示,相当于视图层(V)
3)wxss:页面样式表,纯前端,用于辅助wxml展示
4)json:页面配置,配置一些页面展示的数据,充当部分的模型(M)
App.js
用来注册一个小程序。在小程序启动的时候调用,并创建小程序,直到销毁。在整个小程序的生命周期过程中,它都是存在的。很显然它是单例的,全局的。所以,
1)只能在app.js中注册一次。
2)在代码的任何地方都可以通过getApp()获取这个唯一的小程序单例,
比如varapp=getApp();
App()的参数是object类型{},指定了小程序的生命周期函数。
onLaunch函数
监听小程序初始化。
当小程序初始化完成时,会触发onLaunch(全局只触发一次)。
onShow函数
监听小程序显示。
当小程序启动,或从后台进入前台显示,会触发。
onHide函数
监听小程序隐藏。
当小程序从前台进入后台,会触发。
所谓前后台的定义,类似于手机上的app,比如当不在使用微信时,就进入了后台。
App.json
接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成
“pages”:[
“pages/index/index”,
“pages/result/result”,
“pages/history/history”
],
window
用于设置小程序的状态栏、导航条、标题、窗口背景色。
“window”:{
“backgroundTextStyle”:”light”,
“navigationBarBackgroundColor”:”#d13f49″,
“navigationBarTitleText”:”姓名测算”,
“navigationBarTextStyle”:”#7f8389″
},
tabBar
通过tabBar配置项指定tab栏的表现,以及tab切换时显示的对应页面。
tabBar配置数组,只能配置最少2个、最多5个tab,tab按数组的顺序排序。
“tabBar”:{
“color”:”#7f8389″,
“selectedColor”:”#d13d3d”,
“borderStyle”:”white”,
“backgroundColor”:”#fff”,
“list”:[
{
“pagePath”:”pages/index/index”,
“text”:”姓名测算”,
“iconPath”:”image/ico1.png”,
“selectedIconPath”:”image/h_ico1.png”
},
{
“pagePath”:”pages/history/history”,
“text”:”测算历史”,
“iconPath”:”image/ico2.png”,
“selectedIconPath”:”image/h_ico2.png”
}
]
},
networkTimeout
可以设置各种网络请求的超时时间。
“networkTimeout”:{
“request”:180000
}
}
三视图预渲染
组件,小程序开发者文档
https://mp.weixin.qq.com/debug/wxadoc/dev/component/view.html
<viewclass=”section”>
<viewclass=”section__title”>flex-direction:row</view>
<viewclass=”flex-wrp”style=”flex-direction:row;”>
<viewclass=”flex-itembc_green”>1</view>
<viewclass=”flex-itembc_red”>2</view>
<viewclass=”flex-itembc_blue”>3</view>
</view>
</view>
<viewclass=”section”>
<viewclass=”section__title”>flex-direction:column</view>
<viewclass=”flex-wrp”style=”height:300px;flex-direction:column;”>
<viewclass=”flex-itembc_green”>1</view>
<viewclass=”flex-itembc_red”>2</view>
<viewclass=”flex-itembc_blue”>3</view>
</view>
</view>
Button
<buttontype=”default”size=”{{defaultSize}}”loading=”{{loading}}”plain=”{{plain}}”disabled=”{{disabled}}”bindtap=”default”hover-class=”other-button-hover”>default</button>
四数据绑定
2.1数据的绑定
<view>{{message}}</view>
data:{
message:’Hello,world!’
}
2.2事件(小程序是不可以操作dom的)
<buttontype=“primary”bindtap=“btnClick”>{{btntext}}</button>
BtnClick:function(){
console.log(“按钮被点击了~”)
}
2.3动态修改内容(对于data的修改,只能使用setData()
<buttontype=“primary”bindtap=“btnClick”>{{btntext}}</button>
<text>{{text}}</text>
data:{
text:“这里是文本”
}
BtnClick:function(){
console.log(“按钮被点击了~”)
this.setData({text:“这是新的内容~”})
}
<viewwx:if=”{{condition}}”></view>
2.4渲染标签
<viewwx:if=“{{false}}”>{{text}}</view>
或者
<buttontype=“primary”bindtap=“btnClick”>{{btntext}}</button>
<viewwx:if=“{{show}}”>{{text}}</view>
data:{
show:false
}
动态改变这个值
btnClick:function(){
varisShow=this.data.show;
console.log(“isShow:”+isShow)
this.setData({text:“这是改变后的内容…”,show:!isShow})
}
<viewwx:if=“{{show}}”>{{text}}1</view>
<viewwx:else>{{text}}2</view>
2.4循环
<viewwx:for=“{{news}}”>{{index}}-{{item}}</view>
data:{
news:[‘aaa’,‘bbb’,‘ccc’]
}
自己定义
<viewwx:for=“{{news}}”wx:for-item=“items”wx:for-index=“ix”>{{ix}}-{{items}}</view>
动态修改数组的值
data:{
news:[‘aaa’,‘bbb’,‘ccc’]
}
btnClick:function(){
varnewsdata=this.data.news;
newsdata.shift()
this.setData({news:newsdata})
}
模板template
1.例如头部
header.html
<text>这里是头部</text>
引入
<includesrc=”../template/header”/>相当于把全部内容复制过来
2.例如foot
foot.html
<templatename=“foot1”>
这里是底部1
</template>
<templatename=“foot2”>
这里是底部2
</template>
引入
<importsrc=”../template/footer”/>
<templateis=”foot1″/>
is就相当于引入部分模块内容
五生命周期
用户首次打开小程序,触发onLaunch(全局只触发一次)。
小程序初始化完成后,触发onShow方法,监听小程序显示。
小程序从前台进入后台,触发onHide方法。
小程序从后台进入前台显示,触发onShow方法。
小程序后台运行一定时间,或系统资源占用过高,会被销毁。
示例代码:
App({
onLaunch
:
function()
{
//Dosomethinginitialwhenlaunch.
},
onShow
:
function()
{
//Dosomethingwhenshow.
},
onHide
:
function()
{
//Dosomethingwhenhide.
},
onError
:
function(msg)
{
console
.log(msg)
},
globalData
:
‘Iamglobaldata’
})
小程序提供了全局的getApp()函数,可以获取到小程序实例。
//other.js
var
appInstance=getApp()
console
.log(appInstance.globalData)
//Iamglobaldata
总结:
onLoad:页面加载。
1)一个页面只会调用一次。
2)参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的query。
onShow:页面显示
1)每次打开页面都会调用一次。
onReady:页面初次渲染完成
1)一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
2)对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
onHide:页面隐藏
1)当navigateTo或底部tab切换时调用。
onUnload:页面卸载
1)当redirectTo或navigateBack的时候调用。
六微信小程序页面跳转三种方式
为了不让用户在使用小程序时造成困扰,微信小程序规定页面路径只能是五层,请尽量避免多层级的交互方式。
页面跳转的话就涉及到了多个页面层级
<navigatorurl=”../index/index”pen-type=”navigate”>跳转到新页面</navigator>
pen-type=”navigate”等价于API的wx.navigateTo而wx.navigateTo的url是需要跳转的应用内非tabBar的页面的路径
保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
<navigatorurl=”../index/index”open-type=”redirect”>在当前页打开</navigator>
open-type=”redirect”等价于API的wx.redirectTo而wx.redirectTo的url是需要跳转的应用内非tabBar的页面的路径
<navigatorurl=”../index/index”open-type=”switchTab”>切换到首页Tab</navigator>
open-type=”switchTab”等价于API的wx.switchTab而wx.switchTab的url是需要跳转到tabBar页面,并关闭其他所有非tabBar页面

微信小程序后端怎么搭建

微信小程序是一种全新的衔接用户与服务的方式,它能够在微信内被便捷地获取和传达,同时具有出色的运用体会。
2017年1月9日~2018年1月9日,小程序正式上线一周年。上线以来,小程序不断地开释新才能,迭代更新,一年来已发布近50多次新才能。小程序敞开了互联网创业3.0年代,微信庞大的流量与平台才能,也在不断地赋能于小程序。
本文档将带你一步步创立完结一个微信小程序,并能够在手机上体会该小程序的实际作用。这个小程序的首页将会显现欢迎语以及当时用户的微信头像,点击头像,能够在新开的页面中检查当时小程序的发动日志。
【微信小程序开发教程】
1.获取微信小程序的AppID
登录https://mp.weixin.qq.com,就能够在网站的“设置”-“开发者设置”中,检查到微信小程序的AppID了,留意不可直接运用服务号或订阅号的AppID。
微信小程序怎样开发微信小程序开发文档
留意:假如要以非管理员微信号在手机上体会该小程序,那么咱们还需求操作“绑定开发者”。即在“用户身份”-“开发者”模块,绑定上需求体会该小程序的微信号。本教程默许注册帐号、体会都是运用管理员微信号。
2.创立项目
咱们需求经过开发者东西,来完结小程序创立和代码修改。
开发者东西装置完结后,打开并运用微信扫码登录。挑选创立“项目”,填入上文获取到的AppID,设置一个本地项目的名称(非小程序名称),比方“我的第一个项目”,并挑选一个本地的文件夹作为代码存储的目录,点击“新建项目”就能够了。
为便利初学者了解微信小程序的根本代码结构,在创立过程中,假如挑选的本地文件夹是个空文件夹,开发者东西会提示,是否需求创立一个quickstart项目。挑选“是”,开发者东西会帮助咱们在开发目录里生成一个简单的demo。
微信小程序怎样开发微信小程序开发文档
项目创立成功后,咱们就能够点击该项目,进入并看到完整的开发者东西界面,点击左边导航,在“修改”里能够检查和修改咱们的代码,在“调试”里能够测试代码并模拟小程序在微信客户端作用,在“项目”里能够发送到手机里预览实际作用。
3.编写代码
创立小程序实例
点击开发者东西左边导航的“修改”,咱们能够看到这个项目,已经初始化并包含了一些简单的代码文件。最要害也是必不可少的,是app.js、app.json、app.wxss这三个。其中,.js后缀的是脚本文件,.json后缀的文件是装备文件,.wxss后缀的是款式表文件。微信小程序会读取这些文件,并生成小程序实例。
下面咱们简单了解这三个文件的功能,便利修改以及从头开发自己的微信小程序。
app.js是小程序的脚本代码。咱们能够在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰厚的API,如本例的同步存储及同步读取本地数据。想了解更多可用API,可参阅API文档
app.json是对整个小程序的全局装备。咱们能够在这个文件中装备小程序是由哪些页面组成,装备小程序的窗口背景色,装备导航条款式,装备默许标题。留意该文件不可增加任何注释。更多可装备项可参阅装备详解
app.wxss是整个小程序的公共款式表。咱们能够在页面组件的class特点上直接运用app.wxss中声明的款式规矩。
创立页面
在这个教程里,咱们有两个页面,index页面和logs页面,即欢迎页和小程序发动日志的展现页,他们都在pages目录下。微信小程序中的每一个页面的【途径+页面名】都需求写在app.json的pages中,且pages中的第一个页面是小程序的首页。
每一个小程序页面是由同途径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是装备文件,.wxss后缀的是款式表文件,.wxml后缀的文件是页面结构文件。
index.wxml是页面的结构文件:
本例中运用了、、、来搭建页面结构,绑定数据和交互处理函数。
index.js是页面的脚本文件,在这个文件中咱们能够监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,呼应页面交互事件等。
index.wxss是页面的款式表:
页面的款式表对错必要的。当有页面款式表时,页面的款式表中的款式规矩会层叠掩盖app.wxss中的款式规矩。假如不指定页面的款式表,也能够在页面的结构文件中直接运用app.wxss中指定的款式规矩。
index.json是页面的装备文件:
页面的装备文件对错必要的。当有页面的装备文件时,装备项在该页面会掩盖app.json的window中相同的装备项。假如没有指定的页面装备文件,则在该页面直接运用app.json中的默许装备。
logs的页面结构
logs页面运用控制标签来组织代码,在上运用wx:for绑定logs数据,并将logs数据循环展开节点
运行成果如下:
4.手机预览
开发者东西左边菜单栏挑选”项目”,点击”预览”,扫码后即可在微信客户端中体会。

未经允许不得转载:IT技术网站 » 小程序开发文档(微信小程序后端怎么搭建)
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

志在指尖 用双手敲打未来

登录/注册IT技术大全

热门IT技术

C#基础入门   SQL server数据库   系统SEO学习教程   WordPress小技巧   WordPress插件   脚本与源码下载