微信小程序的小记录_微信小程序记录标签-优快云博客

1.了解微信小程序（支付宝小程序）
小程序与app有什么不同：
好处：小程序不需要下载手机上，比较容易传播
缺点：留不住用户

2.微信
开发一个项目：
开发网站：
1)选择一个项目框架：tp5/laravel/yii/ci （MVC）—
2)创建一个前端的框架前端（vue/react）开发的是网站开发工具：hbuild/phpstrom
一个后端的框架 tp5/laravel (数据层)
线上的服务器上了
微信小程序中
前端的框架：微信小程序提供的框架（类似与vue的） —打包，微信平台
server端：tp5/laravel (数据层) —线上的服务器上 jujaoweb.com

3.微信小程序的具体开发流程
3.1 先注册微信小程序的账号的
3.2 开发设置基本设置
appid appsecret
3.3 server端的项目发布到服务器上之后 web服务器(nginx —http协议)
下载https证书(免费的阿里云)
配置nginx的支持https协议的访问
3.4 项目开发过程中 server端项目本机web服务器上运行不校验https协议的
3.5 微信接口针对微信公众号的部分接口也是支持微信小程序的
工具：
下载微信开发工具
小程序属于MVVM框架数据层视图层 vm层
3.6 小程序的构成应用app (js, wxml, wxss ,json)–各个页面(page) js wxml wxss json
1.app.json 是当前小程序的全局配置
“pages”: [ 各个界面的路径
“pages/index/index”, //第一个界面就是默认显示的界面
“pages/logs/logs”
],
2.wxss 类似与css文件 app.wxss 全局样式设置
3.app.js 项目的入口
App({
生命周期调回函数:onLaunch OnShow OnHide
})
4.小程序中的页面创建再pages文件夹中
每个页面创建一个文件夹
js文件（逻辑层） json文件（配置），wxml 文件（html文件） wxss文件(css文件)
5.wxss css
单位：rpx
6.wxml
页面布局组件
标签构成 :自带的标签 view—div 视图容器 text—文本容器 image:显示图片
7.page
8.视图层和数据层进行数据绑定
wx:for="{{}}"
{{index}}------{{item}}
9.js文件需要导出当前js模块
moudel.export={
a:a
}
在使用的文件中通过var obj=require(“xxx.js”);
obj.a
10.事件：
手指的按下移动抬起点击 tap bindtap(继续冒泡往上层级继续找和它相同的事件类型的事件) catchtap （阻止冒泡）
11.修改数据层的方法：
Page：各个页面中的数据记录到data属性的
this.setData({ //修改数据
arr: [1, 2, 3, 4, 5]
});
读取数据层某个变量的值：
var oldArr=this.data.arr;
App 中定义的数据 globalData中这里面的数据可以在各个界面中去使用的
读取：
//获取应用实例
const app = getApp()
app.globalData.userInfo；
//修改全局变量
app.globalData.userInfo=“xxx”;
******【已解决】微信小程序一个页面修改了全局变量，另一个页面却还是显示该变量的初始值
参考文档：https://blog.youkuaiyun.com/yang_ri/article/details/90300432
// 生命周期函数–监听页面显示
onShow: function () {
this.setData({
theGlobalData: app.globalData.theGlobalData
})
},
哪里需要实时呈现全局变量数值，哪里的js文件就需要补上onShow方法中的代码，用点击事件的那种不必使用这个函数。
12.在各个页面中要想得到app中定义的数据需要先得到app的对象
const app = getApp()
13.小程序常见接口、
1.获取用户基本信息的接口
wx.getSetting 授权
wx.getUserInfo 用户信息 1.应用层已经把用户信息获取到了 2.wx.canIUse("") app.userInfoReadyCallback 3.wx.canIUse("")！重新调用wx.getUserInfo
1.登录
https://blog.youkuaiyun.com/xiaxia_Lin/article/details/96157555
2.数据通信
点击详情勾选上不校验合法域名
GET/POST https://blog.youkuaiyun.com/xiaxia_Lin/article/details/96157555
3.跳转页面

		wx.redirectTo({
   			  url: '../index/index'
   			})
      //跳转页面
        wx.navigateTo({
          url: '../doctrine/doctrine'
        })

4.数据缓存

       if (wx.getStorageSync('test')){
     	 console.log(wx.getStorageSync('test')) 
  		}else{
  		  wx.setStorageSync("test", "123");
  		}

微信小程序的小记录

相关推荐