微信小程序基础

01-微信小程序基础

1.小程序全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

全局配置 | 微信开放文档

1.pages

用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。

1. // app.json 中写
2. {
3. "pages": [
4. "pages/home/home",
5. "pages/list/list"
6. ]
7. }

2.window

用于设置小程序的状态栏、导航条、标题、窗口背景色。 就是全局的配置（头部）

1. "window":{
2. "backgroundTextStyle":"light", // 背景字体样式：'亮' 只在下拉时显示，默认看不到
3. "navigationBarBackgroundColor": "#fff", //导航条背景颜色：白色
4. "navigationBarTitleText": "Weixin", //导航条标题文字：‘weixin’
5. "navigationBarTextStyle":"black" //导航条标题文字颜色：‘黑色’
6. },

3.tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

1. "tabBar":{
2. "color":"#555",
3. "selectedColor":"#00b065",
4. "backgroundColor":"white",
5. "borderStyle":"black",
6. "list":[
7. {
8. "pagePath":"pages/home/home",
9. "text":"首页",
10. "iconPath":"assets/home.png",
11. "selectedIconPath": "assets/home-active.png"
12. },
13. {
14. "pagePath":"pages/list/list",
15. "text":"分类",
16. "iconPath": "assets/cate.png",
17. "selectedIconPath": "assets/cate-active.png"
18. }
19. ]
20. },

页面配置

1. //pages/home/home.json
2. {
3. "navigationBarTitleText":"首页"
4. }

小程序组件

在小程序中没有（html标签）了，所有的布局、页面功能都是由组件实现的。

原来做页面布局时会用到很多布局标签

1. 原来 div p table ul li ... 现在 都会 <view></view> 组件代替

原来做页面时用到很多修饰文字的标签

1. 原来 h1 h2 span b i .... 现在 都用 <text></text> 组件代替

在做小程序布局时，思考需要做结构时用，需要包裹文字时就用

小程序中的样式单位 rpx

原来做pc端时，用px单位，它是一个相对单位，不能相应网页的缩放。

在做移动端时，用rem单位，它可以在不同设备上等比例的显示（可以适合所有的设备）,但是缺点 需要换算.

在小程序中 搞了一个rpx，是px和rem的结合体，既可以像给px一样不需要换算，它自带缩放，适配设备。

rpx是基于750px屏幕宽度的尺寸。

swiper组件

1. <swiper
2. indicator-dots="{{true}}"
3. autoplay="{{true}}"
4. interval="{{2000}}"
5. circular="{{true}}"
6. class="swiper"
7. >
8. <swiper-item class="swiper-item">
9. <image src="../../assets/q70.jpg" mode="widthFix"/>
10. </swiper-item>
11. <swiper-item>
12. <image src="../../assets/q71.jpg" mode="widthFix"/>
13. </swiper-item>
14. <swiper-item>
15. <image src="../../assets/q72.jpg" mode="widthFix"/>
16. </swiper-item>
17. <swiper-item>
18. <image src="../../assets/q72.jpg" mode="widthFix"/>
19. </swiper-item>
20. <swiper-item>
21. <image src="../../assets/q73.jpg" mode="widthFix"/>
22. </swiper-item>
23. </swiper>

在小程序中所有的内容图片，不能直接插入，需要从服务器获取。

服务器

gileshop服务端是项目提供的服务器。

第一步： 还原数据库， 要在

C:\Program Files\MongoDB\Server\4.2\bin

下使用命令

1. mongoimport --host localhost --port 27017 --db WNMallWechat --collection swipers --file C:\database\swipers.json
3. mongoimport --host localhost --port 27017 --db WNMallWechat --collection categories --file C:\database\categories.json
5. mongoimport --host localhost --port 27017 --db WNMallWechat --collection catitems --file C:\database\catitems.json
7. mongoimport --host localhost --port 27017 --db WNMallWechat --collection floors --file C:\database\floors.json
9. mongoimport --host localhost --port 27017 --db WNMallWechat --collection goods --file C:\database\goods.json
11. mongoimport --host localhost --port 27017 --db WNMallWechat --collection orders --file C:\database\orders.json
13. mongoimport --host localhost --port 27017 --db WNMallWechat --collection pics --file C:\database\pics.json
15. mongoimport --host localhost --port 27017 --db WNMallWechat --collection recommend --file C:\database\recommend.json
17. mongoimport --host localhost --port 27017 --db WNMallWechat --collection users --file C:\database\users.json

第二步：还原项目依赖

npm i

第三步：启动项目

nodmon app

4.微信小程序发http请求

1. onLoad(options) {
2. wx.request({
3. url: 'http://127.0.0.1:4000/home/swiperdata',
4. success(res){
5. console.log(res.data)
6. }
7. })
8. },

5.给data中动态数据赋值

需要this.setData()

1. {
2. data:{
3. swiperdata:[]
4. },
5. onload(){
8. this.setData({
9. swiperdata:res.data
10. })
11. }
12. }

6.循环数据到页面

1. <swiper
2. indicator-dots="{{true}}"
3. autoplay="{{true}}"
4. interval="{{2000}}"
5. circular="{{true}}"
6. class="swiper"
7. >
8. <!--
9. // vue的写法 v-for="(item,index) in swiperdata" :key="index"
10. // 小程序 wx:for={{swiperdata}} wx:key="{{index}}"
11. //固定循环出来的项就叫 item 对应的 所引固定叫 index
12. -->
13. <swiper-item class="swiper-item" wx:for="{{swiperdata}}" wx:key="{{item._id}}">
14. <image src="{{item.image_src}}" mode="widthFix"/>
15. </swiper-item>
17. </swiper>

7.事件

在小程序中 点击事件是 bindtap=”事件名”

1. <swiper-item
2. class="swiper-item"
3. wx:for="{{swiperdata}}"
4. wx:key="{{item._id}}"
5. data-url="{{item.navigator_url}}" 自定义属性
6. bindtap="jump" //绑定事件
7. >
8. <image src="{{item.image_src}}" mode="widthFix"/>
9. </swiper-item>
11. jump(event){ //事件对象
12. console.log(event.currentTarget.dataset.url) //到事件对象上获取-自定义属性的值
13. },

8.页面跳转

wx.navigateTo() 从一个页面跳转到 【不在tabBar】上的另一个页面

我们现在观察在【tabBar】上的页面是 home页和list页，也就是说 wx.navigateTo() 不能用于跳转到这两个页面。

由于多数的页面不在【tabBar】上，就需要显示一个返回键来切换。

1. //跳转-不在tabBar上的页面,能返回
2. // wx.navigateTo({
3. // url: event.currentTarget.dataset.url,
4. // })
5. //跳转-在tabBar上的页面
6. // wx.switchTab({
7. // url: '/pages/list/list',
8. // })
9. //跳转- 不在tabBar上的页面，并不能返回
10. wx.redirectTo({
11. url: event.currentTarget.dataset.url, ///pages/goods_detail/index?goods_id=38
12. })

接受参数：

在goods_detail页上受参数：

1. onLoad(options) {
2. console.log(options) //{goods_id: "395"}
3. },

 

02-微信小程序生命周期与常用组件

1.容器宽度高度的单位

vw和vh, 这里的v是view视图 w是width,h是height

1. 1vh; 视图总高度的1%
2. 100vw; 视图总宽度100%

2. scroll-view组件

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度

属性	默认值	解释
scroll-x	false	允许横向滚动
scroll-y	false	允许纵向滚动
bindscrolltolower	eventhandle	滚动到底部/右边时触发

3.wx:for 的取值和取索引

1. <view class="content">
2. <view
3. class="content_item"
4. wx:for="{{item.children}}"
5. wx:for-item="item2"
6. wx:for-index="index2"
7. wx:key="index2"
8. >
9. <image src="{{item2.cat_icon}}" mode="widthFix" />
10. {{item2.cat_name}}
11. </view>
12. </view>

使用wx:for 默认每一项的数据为 item,默认的索引为 index

也可以设置

1. wx:for-item="item2"
2. wx:for-index="index2"

去修改默认的数据引用，和索引引用的名称。

4.下接刷新

goods.json

1. {
2. // "usingComponents": {},
3. // "navigationBarTitleText": "列表",
4. "enablePullDownRefresh":true 允许下拉
5. }

goods.js 下拉时要做的事件可以在 自带的 onPullDownRefresh 钩子函数中完成

1. /**
2. * 页面相关事件处理函数--监听用户下拉动作
3. */
4. onPullDownRefresh() {
5. console.log("你下拉了")
6. this.setData({
7. currentPage:1
8. })
9. this.getGoods()
10. },

 

03-微信小程序组件

1.组件

1.注册组件

1. //vue 局部注册组件
2. <top></top>
3. import top from "../xxx/xxxx/top"
4. export default {
5. components:{top}
6. }
8. // 小程序 局部注册组件
9. // xxx.json
10. {
11. "usingComponents":{
12. ‘search’:"../../components/search/search"
13. }
14. }

2.全局注册组件

1. //vue 全局注册组件
2. //main.js
3. import top from "../xxx/xxxx/top"
4. Vue.component("top",top)
6. // 小程序 全局注册组件
7. // app.json
8. {
9. "usingComponents":{
10. ‘search’:"../../components/search/search"
11. }
12. }

3.组件的props

可以给组件传入数据

1. //vue 中的props
2. <search :val="100"></search>
4. //vue 组件内部接收
5. export default {
6. props:{
7. val:{
8. type:String,
9. default:"xxxx"
10. }
11. }
12. }
14. //小程序中的props
15. <search val="{{100}}"></search>
17. //在 小程序 组件内部接收
18. Component({
19. properties:{
20. val:{
21. type:String,
22. value:"xxxxx"
23. }
24. }
25. })

4.自定义事件(把组件内部的值回传到组件外部)

1. vue 中组件的自定义事件
2. <search @abc="change"></search>
4. methods:{
5. chagen(val){
6. console.log(val) //要回传的值
7. }
8. }
10. //vue 中组件内部需要触发自定义事件
11. export default {
12. methods:{
13. tijiao(){
14. this.$emit("abc",'要回传的值')
15. }
16. }
17. }
20. //在小程序中的自定义事件
21. //xxx.wxml
22. <search bind:abc="change"></search>
23. //xxx.js
24. methods:{
25. chagen(val){
26. console.log(val) //要回传的值
27. }
28. }
30. //小程序 中组件内部需要触发自定义事件
31. Component({
32. methods:{
33. tijiao(){
34. this.triggerEvent("abc",'要回传的值')
35. }
36. }
37. })

5.组件中的插槽

1. //vue 组件中的 插槽
2. <search>
3. <div class="left" slot='left'>返回</div>
4. <div>标题</div>
5. <div class="right" slot='right'>菜单</div>
6. </search>
8. //vue 组件的内部
9. <template>
10. <div>
11. <div>
12. <slot name='left'></slot>
13. </div>
14. <slot></slot>
15. <div>
16. <slot name='right'></slot>
17. </div>
18. </div>
19. </template>
21. //在微信小程序中 就按以上的思路写就可以了

2.在微信小程序中使用组件

1.在项目的根目录建一个 components 文件夹

1. 在 components 建一个 search文件夹

3.右建search文件夹，选新建 component，输入那4个文件的文件名

4.在组件中所有的样式，都需要通过 类样式来定义(class)，不能使用 #id , view input 标签名

3.rich-text组件

富文本 rich-text 可以把带标签的文本渲染成正常的html结构

1. data:{
2. aa:"<h1>xxx</h1>"
3. }
4. <rich-text nodes="{{aa}}" />

4.本地数据库

1. wx.setStorageSync('key', 'value') //往本地数据库 存一条数据
2. var value = wx.getStorageSync('key') // 从本地数据库 取一条数据
3. wx.removeStorageSync('key') //从本地数据库 删除一条数据
4. wx.clearStorageSync() //把本地数据库空

注意： 在浏览器自带的本地数据库只能存【字符串】，但在小程序中可以存任意的数据类型

5.onshow钩子函数

生命周期函数—监听页面显示,当页面展示时就会加载的函数。

因为在tabbar上的页面，经常需要切换，为了提高性能，离开页面时，并不会销毁页面，而是隐藏了。

如果是隐藏，我们在进入页面就不会再触发 onLoad(){} 钩子函数。

1. onShow() {
2. let car = wx.getStorageSync('shopCar') || []
3. console.log(car)
4. this.setData({
5. shopCar:car
6. })
7. },